made header sticky on scroll (#519) (#520)

* made header sticky on scroll (#519)

* cleanup

---------

Co-authored-by: Maze Winther <mazewinther@gmail.com>

1 files changed, 8 insertions, 2 deletions

diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index bed04a27..4d68efb2 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -9,7 +9,13 @@ import Image from "next/image";
 export function Header() {
   const leftContent = (
     <Link href="/" className="flex items-center gap-3">
-      <Image src="/logo.svg" alt="OpenCut Logo" className="invert dark:invert-0" width={32} height={32} />
+      <Image
+        src="/logo.svg"
+        alt="OpenCut Logo"
+        className="invert dark:invert-0"
+        width={32}
+        height={32}
+      />
       <span className="text-xl font-medium hidden md:block">OpenCut</span>
     </Link>
   );
@@ -38,7 +44,7 @@ export function Header() {
   );
 
   return (
-    <div className="mx-4 md:mx-0">
+    <div className="sticky top-4 z-50 mx-4 md:mx-0">
       <HeaderBase
         className="bg-background border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"
         leftContent={leftContent}