✨ Enhance styling with custom scrollbar and adjust layout properties …

…for improved user experience
ImJustLucas · Oct 30, 2024 · c71a559 · c71a559
1 parent 3805cc4
commit c71a559
Show file tree

Hide file tree

Showing 4 changed files with 2,644 additions and 2,013 deletions.
diff --git a/app/ClientLayout.tsx b/app/ClientLayout.tsx
@@ -11,10 +11,10 @@ interface ClientLayoutProps {
 export default function ClientLayout({ children }: ClientLayoutProps) {
   const { isOpen } = useMobileMenu();
   return (
-    <div className="p-3 bg-background w-screen h-screen flex relative gap-3 select-none	">
+    <div className="p-3 bg-background w-screen h-dvh flex relative gap-3 select-none	">
       <Sidebar />
       <div
-        className={`bg-primary-foreground w-full h-full rounded-lg p-4 overflow-y-scroll	 ${
+        className={`bg-primary-foreground w-full h-full rounded-lg p-4 pb-8 overflow-y-scroll	 ${
           isOpen ? "blur-sm" : ""
         }`}
       >

diff --git a/components/projects/ProjectCard.tsx b/components/projects/ProjectCard.tsx
@@ -57,7 +57,7 @@ export const ProjectCard: React.FC<ProjectType> = ({ project }) => {
         </div>
       </CardContent>
 
-      <CardFooter className="flex justify-between flex-none bg-card/80 backdrop-blur-sm relative z-10">
+      <CardFooter className="flex justify-between flex-none bg-card/80 backdrop-blur-sm relative z-[5]">
         {project.openSource && (
           <LinkButton
             href={project.links.github || "https://github.com/imjustlucas"}