From b600b58d4d600773fc11d919ff31c5e00e7c418c Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Mon, 29 Dec 2025 02:45:54 +0400
Subject: [PATCH 1/3] chore: update dev dependencies to latest versions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dependencies:

- jsdom 27.3.0 → 27.4.0
- lefthook 2.0.12 → 2.0.13

Routine dependency update to keep dev tooling current.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 package-lock.json | 161 +++++++++++++++++++++-------------------------
 package.json      |   4 +-
 2 files changed, 75 insertions(+), 90 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b8ecd22..08e8101 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,8 +40,8 @@
         "babel-plugin-react-compiler": "1.0.0",
         "baseline-browser-mapping": "^2.9.11",
         "dotenv": "^17.2.3",
-        "jsdom": "^27.3.0",
-        "lefthook": "^2.0.12",
+        "jsdom": "^27.4.0",
+        "lefthook": "^2.0.13",
         "markdownlint-cli2": "^0.20.0",
         "tailwindcss": "^4",
         "tw-animate-css": "^1.4.0",
@@ -1325,6 +1325,24 @@
         "node": ">=18"
       }
     },
+    "node_modules/@exodus/bytes": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.7.0.tgz",
+      "integrity": "sha512-5i+BtvujK/vM07YCGDyz4C4AyDzLmhxHMtM5HpUyPRtJPBdFPsj290ffXW+UXY21/G7GtXeHD2nRmq0T1ShyQQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@exodus/crypto": "^1.0.0-rc.4"
+      },
+      "peerDependenciesMeta": {
+        "@exodus/crypto": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
@@ -4394,16 +4412,16 @@
       "license": "ISC"
     },
     "node_modules/html-encoding-sniffer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
-      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "whatwg-encoding": "^3.1.1"
+        "@exodus/bytes": "^1.6.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
     "node_modules/http-proxy-agent": {
@@ -4434,19 +4452,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/ignore": {
       "version": "7.0.5",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
@@ -4595,18 +4600,19 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "27.3.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.3.0.tgz",
-      "integrity": "sha512-GtldT42B8+jefDUC4yUKAvsaOrH7PDHmZxZXNgF2xMmymjUbRYJvpAybZAKEmXDGTM0mCsz8duOa4vTm5AY2Kg==",
+      "version": "27.4.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.4.0.tgz",
+      "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@acemir/cssom": "^0.9.28",
         "@asamuzakjp/dom-selector": "^6.7.6",
+        "@exodus/bytes": "^1.6.0",
         "cssstyle": "^5.3.4",
         "data-urls": "^6.0.0",
         "decimal.js": "^10.6.0",
-        "html-encoding-sniffer": "^4.0.0",
+        "html-encoding-sniffer": "^6.0.0",
         "http-proxy-agent": "^7.0.2",
         "https-proxy-agent": "^7.0.6",
         "is-potential-custom-element-name": "^1.0.1",
@@ -4616,7 +4622,6 @@
         "tough-cookie": "^6.0.0",
         "w3c-xmlserializer": "^5.0.0",
         "webidl-conversions": "^8.0.0",
-        "whatwg-encoding": "^3.1.1",
         "whatwg-mimetype": "^4.0.0",
         "whatwg-url": "^15.1.0",
         "ws": "^8.18.3",
@@ -4685,9 +4690,9 @@
       }
     },
     "node_modules/lefthook": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook/-/lefthook-2.0.12.tgz",
-      "integrity": "sha512-I2FdA9cdnq1icwlNz4RADs7exuqe47q1N9+p2LmcP/WfchWh16mvTB82OAD7w7zK9GxblS9GpF7pASaOSl4c7A==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook/-/lefthook-2.0.13.tgz",
+      "integrity": "sha512-D39rCVl7/GpqakvhQvqz07SBpzUWTvWjXKnBZyIy8O6D+Lf9xD6tnbHtG5nWXd9iPvv1AKGQwL9R/e5rNtV6SQ==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -4695,22 +4700,22 @@
         "lefthook": "bin/index.js"
       },
       "optionalDependencies": {
-        "lefthook-darwin-arm64": "2.0.12",
-        "lefthook-darwin-x64": "2.0.12",
-        "lefthook-freebsd-arm64": "2.0.12",
-        "lefthook-freebsd-x64": "2.0.12",
-        "lefthook-linux-arm64": "2.0.12",
-        "lefthook-linux-x64": "2.0.12",
-        "lefthook-openbsd-arm64": "2.0.12",
-        "lefthook-openbsd-x64": "2.0.12",
-        "lefthook-windows-arm64": "2.0.12",
-        "lefthook-windows-x64": "2.0.12"
+        "lefthook-darwin-arm64": "2.0.13",
+        "lefthook-darwin-x64": "2.0.13",
+        "lefthook-freebsd-arm64": "2.0.13",
+        "lefthook-freebsd-x64": "2.0.13",
+        "lefthook-linux-arm64": "2.0.13",
+        "lefthook-linux-x64": "2.0.13",
+        "lefthook-openbsd-arm64": "2.0.13",
+        "lefthook-openbsd-x64": "2.0.13",
+        "lefthook-windows-arm64": "2.0.13",
+        "lefthook-windows-x64": "2.0.13"
       }
     },
     "node_modules/lefthook-darwin-arm64": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook-darwin-arm64/-/lefthook-darwin-arm64-2.0.12.tgz",
-      "integrity": "sha512-tuBz1sNLien+nKKb8BDopKjS6EnbXU8rQzhMVBY+bnVfsTiYDfbBr4wo/IzA5TcwoTL/b5somCJhljEw6DvSyg==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook-darwin-arm64/-/lefthook-darwin-arm64-2.0.13.tgz",
+      "integrity": "sha512-KbQqpNSNTugjtPzt97CNcy/XZy5asJ0+uSLoHc4ML8UCJdsXKYJGozJHNwAd0Xfci/rQlj82A7rPOuTdh0jY0Q==",
       "cpu": [
         "arm64"
       ],
@@ -4722,9 +4727,9 @@
       ]
     },
     "node_modules/lefthook-darwin-x64": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook-darwin-x64/-/lefthook-darwin-x64-2.0.12.tgz",
-      "integrity": "sha512-FnuUMPPRMJyTEPXg6PotSrFJ8qf8FDLhhD1zLh74D+9Cye5j9n3lcrCQEjXubPT8du/GZLxMBjjffRbcZ8eYDA==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook-darwin-x64/-/lefthook-darwin-x64-2.0.13.tgz",
+      "integrity": "sha512-s/vI6sEE8/+rE6CONZzs59LxyuSc/KdU+/3adkNx+Q13R1+p/AvQNeszg3LAHzXmF3NqlxYf8jbj/z5vBzEpRw==",
       "cpu": [
         "x64"
       ],
@@ -4736,9 +4741,9 @@
       ]
     },
     "node_modules/lefthook-freebsd-arm64": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook-freebsd-arm64/-/lefthook-freebsd-arm64-2.0.12.tgz",
-      "integrity": "sha512-DXElB0qR5e6a8cXkFNYakhwCieypbfh6Y4QG39pzMnLsG03g/nhe093o6owfiUZ4mUFyDM6+0xmy0steOooF2g==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook-freebsd-arm64/-/lefthook-freebsd-arm64-2.0.13.tgz",
+      "integrity": "sha512-iQeJTU7Zl8EJlCMQxNZQpJFAQ9xl40pydUIv5SYnbJ4nqIr9ONuvrioNv6N2LtKP5aBl1nIWQQ9vMjgVyb3k+A==",
       "cpu": [
         "arm64"
       ],
@@ -4750,9 +4755,9 @@
       ]
     },
     "node_modules/lefthook-freebsd-x64": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook-freebsd-x64/-/lefthook-freebsd-x64-2.0.12.tgz",
-      "integrity": "sha512-iJN1ZxFeaDi4Fi3b9jcW9wgyNl19LOv2NaVOaAi/tG6mlIn196cmSdXkOA3+943ZbqbdfV9I+bBcIKwneXDA3Q==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook-freebsd-x64/-/lefthook-freebsd-x64-2.0.13.tgz",
+      "integrity": "sha512-99cAXKRIzpq/u3obUXbOQJCHP+0ZkJbN3TF+1ZQZlRo3Y6+mPSCg9fh/oi6dgbtu4gTI5Ifz3o5p2KZzAIF9ZQ==",
       "cpu": [
         "x64"
       ],
@@ -4764,9 +4769,9 @@
       ]
     },
     "node_modules/lefthook-linux-arm64": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook-linux-arm64/-/lefthook-linux-arm64-2.0.12.tgz",
-      "integrity": "sha512-byvmO4Iri6P0COwM8c3lGgeCV3Q0hh1XJpRfrcZDr4Wslq9O63t6J3T6i87oOtY+UjC9pXLl6xGk6hlUcHZ3BQ==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook-linux-arm64/-/lefthook-linux-arm64-2.0.13.tgz",
+      "integrity": "sha512-RWarenY3kLy/DT4/8dY2bwDlYwlELRq9MIFq+FiMYmoBHES3ckWcLX2JMMlM49Y672paQc7MbneSrNUn/FQWhg==",
       "cpu": [
         "arm64"
       ],
@@ -4778,9 +4783,9 @@
       ]
     },
     "node_modules/lefthook-linux-x64": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook-linux-x64/-/lefthook-linux-x64-2.0.12.tgz",
-      "integrity": "sha512-KBaiinmf336rA+/dmYs7H7TTeAOByB0CyLA7k8IecTCuaiuKr6ez7ktSjht19poa5G+V0mts4GgEGcx6HViR0w==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook-linux-x64/-/lefthook-linux-x64-2.0.13.tgz",
+      "integrity": "sha512-QZRcxXGf8Uj/75ITBqoBh0zWhJE7+uFoRxEHwBq0Qjv55Q4KcFm7FBN/IFQCSd14reY5pmY3kDaWVVy60cAGJA==",
       "cpu": [
         "x64"
       ],
@@ -4792,9 +4797,9 @@
       ]
     },
     "node_modules/lefthook-openbsd-arm64": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook-openbsd-arm64/-/lefthook-openbsd-arm64-2.0.12.tgz",
-      "integrity": "sha512-1QBMXX1UW5rtgC4TB52OKWB7Rz/kCBRB+bKKLT/gDD79aPzLgJANTitQQzgFNIWoa7aM9UvzvIAJzOo6FcFIbg==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook-openbsd-arm64/-/lefthook-openbsd-arm64-2.0.13.tgz",
+      "integrity": "sha512-LAuOWwnNmOlRE0RxKMOhIz5Kr9tXi0rCjzXtDARW9lvfAV6Br2wP+47q0rqQ8m/nVwBYoxfJ/RDunLbb86O1nA==",
       "cpu": [
         "arm64"
       ],
@@ -4806,9 +4811,9 @@
       ]
     },
     "node_modules/lefthook-openbsd-x64": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook-openbsd-x64/-/lefthook-openbsd-x64-2.0.12.tgz",
-      "integrity": "sha512-zPcvUzs65GexRA37UHmaZqWuEGSU/zpBaPIY98MybXzzcJfCIf+O0oUQe2riMllwYGvNW0B1y3NOYRziDNe/vA==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook-openbsd-x64/-/lefthook-openbsd-x64-2.0.13.tgz",
+      "integrity": "sha512-n9TIN3QLncyxOHomiKKwzDFHKOCm5H28CVNAZFouKqDwEaUGCs5TJI88V85j4/CgmLVUU8uUn4ClVCxIWYG59w==",
       "cpu": [
         "x64"
       ],
@@ -4820,9 +4825,9 @@
       ]
     },
     "node_modules/lefthook-windows-arm64": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook-windows-arm64/-/lefthook-windows-arm64-2.0.12.tgz",
-      "integrity": "sha512-kgwxguS2GssoHM4SMTp+ArD/Gjg9q5MinD6iI5vSFpuJygD13ZWiXQQfESMHq9y/v1XkD0BdHTJej49dx8P+Vw==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook-windows-arm64/-/lefthook-windows-arm64-2.0.13.tgz",
+      "integrity": "sha512-sdSC4F9Di7y0t43Of9MOA5g/0CmvkM4juQ3sKfUhRcoygetLJn4PR2/pvuDOIaGf4mNMXBP5IrcKaeDON9HrcA==",
       "cpu": [
         "arm64"
       ],
@@ -4834,9 +4839,9 @@
       ]
     },
     "node_modules/lefthook-windows-x64": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/lefthook-windows-x64/-/lefthook-windows-x64-2.0.12.tgz",
-      "integrity": "sha512-Tf/VtSOtF3rBTc9dzRWROa+HuhqaiIV+Xp+1gzlx5+uCueLM0m87Rz6yd4IN5mL7TrDaNkiRXI3FvjCp0dUE4Q==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/lefthook-windows-x64/-/lefthook-windows-x64-2.0.13.tgz",
+      "integrity": "sha512-ccl1v7Fl10qYoghEtjXN+JC1x/y/zLM/NSHf3NFGeKEGBNd1P5d/j6w8zVmhfzi+ekS8whXrcNbRAkLdAqUrSw==",
       "cpu": [
         "x64"
       ],
@@ -6368,13 +6373,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -7203,19 +7201,6 @@
         "node": ">=20"
       }
     },
-    "node_modules/whatwg-encoding": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
-      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "iconv-lite": "0.6.3"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/whatwg-mimetype": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
diff --git a/package.json b/package.json
index 2cb4e0c..d72fe23 100644
--- a/package.json
+++ b/package.json
@@ -55,8 +55,8 @@
     "babel-plugin-react-compiler": "1.0.0",
     "baseline-browser-mapping": "^2.9.11",
     "dotenv": "^17.2.3",
-    "jsdom": "^27.3.0",
-    "lefthook": "^2.0.12",
+    "jsdom": "^27.4.0",
+    "lefthook": "^2.0.13",
     "markdownlint-cli2": "^0.20.0",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",

From 21553642eb4519b3f0362456a754f6ae814a681f Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Mon, 29 Dec 2025 10:18:35 +0400
Subject: [PATCH 2/3] refactor: simplify mobile top bar with sticky positioning
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace fixed positioning + padding offset pattern with sticky positioning.
This eliminates MOBILE_TOP_BAR_OFFSET constant and keeps the element in
document flow, removing the need for coordinated height/padding values.

- Change MobileTopBar from fixed to sticky
- Move MobileTopBar inside content wrapper alongside DesktopTopBar
- Remove MOBILE_TOP_BAR_OFFSET constant from lib/utils
- Use TOP_BAR_HEIGHT constant in left-sidebar instead of magic value

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/(root)/layout.tsx                    | 20 +++-----------------
 components/navigation/left-sidebar.tsx   |  6 ++++--
 components/navigation/mobile-top-bar.tsx |  2 +-
 lib/utils.ts                             |  1 -
 4 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index 64758b4..30953bc 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -3,11 +3,7 @@ import { DesktopTopBar } from "@/components/navigation/desktop-top-bar";
 import { LeftSidebar } from "@/components/navigation/left-sidebar";
 import { MobileTopBar } from "@/components/navigation/mobile-top-bar";
 import { SidebarProvider } from "@/components/ui/sidebar";
-import {
-  cn,
-  LAYOUT_HORIZONTAL_PADDING,
-  MOBILE_TOP_BAR_OFFSET,
-} from "@/lib/utils";
+import { cn, LAYOUT_HORIZONTAL_PADDING } from "@/lib/utils";
 
 const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   const cookieStore = await cookies();
@@ -16,23 +12,13 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
 
   return (
     <SidebarProvider defaultOpen={sidebarOpenFromCookie}>
-      {/* Mobile-only top bar */}
-      <MobileTopBar />
-
-      {/* Full-height sidebar */}
       <LeftSidebar />
 
       {/* Main content area */}
       <div className="flex min-h-screen flex-1 flex-col">
-        {/* Desktop-only top bar */}
+        <MobileTopBar />
         <DesktopTopBar />
-        <main
-          className={cn(
-            "flex-1 pb-10 sm:pt-10",
-            MOBILE_TOP_BAR_OFFSET,
-            LAYOUT_HORIZONTAL_PADDING,
-          )}
-        >
+        <main className={cn("flex-1 pb-10 pt-10", LAYOUT_HORIZONTAL_PADDING)}>
           {children}
         </main>
       </div>
diff --git a/components/navigation/left-sidebar.tsx b/components/navigation/left-sidebar.tsx
index 9ce87bf..9358955 100644
--- a/components/navigation/left-sidebar.tsx
+++ b/components/navigation/left-sidebar.tsx
@@ -25,6 +25,7 @@ import {
   isRouteActive,
   NAV_LINK_ACTIVE_CLASSES,
   NAV_LINK_INACTIVE_CLASSES,
+  TOP_BAR_HEIGHT,
 } from "@/lib/utils";
 
 export function LeftSidebar() {
@@ -32,8 +33,9 @@ export function LeftSidebar() {
 
   return (
     <Sidebar id="left-sidebar" collapsible="icon">
-      {/* Logo section - h-14 matches top bar height */}
-      <SidebarHeader className="h-14 flex-row items-center px-3">
+      <SidebarHeader
+        className={cn(TOP_BAR_HEIGHT, "flex-row items-center px-3")}
+      >
         <Link
           href="/"
           aria-label="DevFlow sidebar logo"
diff --git a/components/navigation/mobile-top-bar.tsx b/components/navigation/mobile-top-bar.tsx
index 7319405..52d82bf 100644
--- a/components/navigation/mobile-top-bar.tsx
+++ b/components/navigation/mobile-top-bar.tsx
@@ -7,7 +7,7 @@ export function MobileTopBar() {
   return (
     <header
       className={cn(
-        "fixed top-0 z-50 flex w-full items-center justify-between bg-sidebar px-4 shadow-sm sm:hidden",
+        "sticky top-0 z-40 flex w-full items-center justify-between bg-sidebar px-4 shadow-sm sm:hidden",
         TOP_BAR_HEIGHT,
       )}
     >
diff --git a/lib/utils.ts b/lib/utils.ts
index 200b56d..7f6eaa5 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -21,7 +21,6 @@ export const NAV_LINK_INACTIVE_CLASSES = "font-medium";
 // Layout constants - shared between top bars and main content
 export const LAYOUT_HORIZONTAL_PADDING = "px-6 md:px-8 lg:px-12";
 export const TOP_BAR_HEIGHT = "h-14";
-export const MOBILE_TOP_BAR_OFFSET = "pt-14"; // Compensates for fixed mobile top bar
 
 /**
  * Get icon classes for navigation items (handles inversion for inactive state).

From cf56727df23fb25224abf37a9e128a4f3ae852b6 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Mon, 29 Dec 2025 11:05:26 +0400
Subject: [PATCH 3/3] refactor: move layout padding from JS constant to CSS
 utility class
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Styling:
- Add .layout-padding-x utility class to globals.css
- Remove LAYOUT_HORIZONTAL_PADDING constant from lib/utils.ts

Components:
- Update layout.tsx and desktop-top-bar.tsx to use new CSS class
- Remove unnecessary cn() calls and imports

Aligns with Tailwind conventions by keeping shared styles in CSS rather than JS.
Simplifies component code by removing utility imports for static class strings.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/(root)/layout.tsx                     | 5 +----
 app/globals.css                           | 5 +++++
 components/navigation/desktop-top-bar.tsx | 5 ++---
 lib/utils.ts                              | 1 -
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index 30953bc..0069033 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -3,7 +3,6 @@ import { DesktopTopBar } from "@/components/navigation/desktop-top-bar";
 import { LeftSidebar } from "@/components/navigation/left-sidebar";
 import { MobileTopBar } from "@/components/navigation/mobile-top-bar";
 import { SidebarProvider } from "@/components/ui/sidebar";
-import { cn, LAYOUT_HORIZONTAL_PADDING } from "@/lib/utils";
 
 const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   const cookieStore = await cookies();
@@ -18,9 +17,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       <div className="flex min-h-screen flex-1 flex-col">
         <MobileTopBar />
         <DesktopTopBar />
-        <main className={cn("flex-1 pb-10 pt-10", LAYOUT_HORIZONTAL_PADDING)}>
-          {children}
-        </main>
+        <main className="flex-1 pb-10 pt-10 layout-padding-x">{children}</main>
       </div>
     </SidebarProvider>
   );
diff --git a/app/globals.css b/app/globals.css
index 47a5b4a..9707fab 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -204,4 +204,9 @@
   .invert-colors {
     @apply invert dark:invert-0;
   }
+
+  /* Consistent horizontal padding for main content and top bar alignment */
+  .layout-padding-x {
+    @apply px-6 md:px-8 lg:px-12;
+  }
 }
diff --git a/components/navigation/desktop-top-bar.tsx b/components/navigation/desktop-top-bar.tsx
index 7ec9d2e..65ddf30 100644
--- a/components/navigation/desktop-top-bar.tsx
+++ b/components/navigation/desktop-top-bar.tsx
@@ -1,15 +1,14 @@
 import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
 import { Button } from "@/components/ui/button";
-import { cn, LAYOUT_HORIZONTAL_PADDING, TOP_BAR_HEIGHT } from "@/lib/utils";
+import { cn, TOP_BAR_HEIGHT } from "@/lib/utils";
 
 export function DesktopTopBar() {
   return (
     <header
       className={cn(
-        "sticky top-0 z-40 hidden items-center gap-4 border-b bg-background sm:flex",
+        "sticky top-0 z-40 hidden items-center gap-4 border-b bg-background sm:flex layout-padding-x",
         TOP_BAR_HEIGHT,
-        LAYOUT_HORIZONTAL_PADDING,
       )}
     >
       <div className="flex flex-1 justify-center">
diff --git a/lib/utils.ts b/lib/utils.ts
index 7f6eaa5..b6a6868 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -19,7 +19,6 @@ export const NAV_LINK_ACTIVE_CLASSES =
 export const NAV_LINK_INACTIVE_CLASSES = "font-medium";
 
 // Layout constants - shared between top bars and main content
-export const LAYOUT_HORIZONTAL_PADDING = "px-6 md:px-8 lg:px-12";
 export const TOP_BAR_HEIGHT = "h-14";
 
 /**