From 0d16f3ba55f4d02ef7afa90be5fa0bf783e687f4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 12:41:13 +0100
Subject: [PATCH] refactor: derive main padding from bar/header height
 constants

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/layout-content.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 74bfb25..f279464 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -41,7 +41,9 @@ export default function LayoutContent({ children }: { children: React.ReactNode
   }
   
   const showOfflineBar = Boolean(auth.user && !isOnline);
-  const barHeightRem = '2.5rem';
+  const barHeightRem = 2.5;
+  const headerHeightRem = 6;
+  const mainTopPaddingRem = barHeightRem + headerHeightRem;
 
   return (
     <>
@@ -59,9 +61,12 @@ export default function LayoutContent({ children }: { children: React.ReactNode
         showFaq={false}
         showSecurity={false}
         showPricing={true}
-        topOffset={showOfflineBar ? barHeightRem : undefined}
+        topOffset={showOfflineBar ? `${barHeightRem}rem` : undefined}
       />
-      <main className={`flex-1 pb-8 ${showOfflineBar ? 'pt-[8.5rem]' : 'pt-24'}`}>
+      <main
+        className={`flex-1 pb-8 ${showOfflineBar ? '' : 'pt-24'}`}
+        style={showOfflineBar ? { paddingTop: `${mainTopPaddingRem}rem` } : undefined}
+      >
         {children}
       </main>
       <Footer