From 8532d5a45e5300f9aeccaeaebeb9f337362a9155 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Wed, 18 Feb 2026 04:03:04 -0600
Subject: [PATCH] =?UTF-8?q?Make=20mobile=20top=20bar=20slightly=20taller?=
 =?UTF-8?q?=20(h-10=E2=86=92h-12)=20and=20unstick=20page=20headers=20on=20?=
 =?UTF-8?q?mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MobileTopBar: bump height from h-10 (40px) to h-12 (48px)
- Page headers (STICKY_HEADER_CLASS): only sticky on desktop (sidebar:sticky sidebar:top-0), scroll naturally on mobile
- Updated inline sticky classes in Feed.tsx and PostDetailPage.tsx to match

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/Feed.tsx         | 4 ++--
 src/components/MobileTopBar.tsx | 2 +-
 src/lib/utils.ts                | 9 ++++-----
 src/pages/PostDetailPage.tsx    | 2 +-
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/Feed.tsx b/src/components/Feed.tsx
index 8151e673..df7d8f4c 100644
--- a/src/components/Feed.tsx
+++ b/src/components/Feed.tsx
@@ -101,7 +101,7 @@ export function Feed() {
 
       {/* Tabs (logged in) or CTA (logged out) */}
       {user ? (
-        <div className="flex border-b border-border sticky top-10 sidebar:top-0 bg-background/80 backdrop-blur-md z-10">
+        <div className="flex border-b border-border sidebar:sticky sidebar:top-0 bg-background/80 backdrop-blur-md z-10">
           <TabButton
             label="Follows"
             active={activeTab === 'follows'}
@@ -114,7 +114,7 @@ export function Feed() {
           />
         </div>
       ) : (
-        <div className="border-b border-border sticky top-10 sidebar:top-0 bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5 backdrop-blur-md z-10 py-3">
+        <div className="border-b border-border sidebar:sticky sidebar:top-0 bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5 backdrop-blur-md z-10 py-3">
           <div className="flex items-center justify-center gap-3 px-6">
             <p className="text-[13px] sidebar:text-sm text-muted-foreground">
               Follow accounts you care about on Mew
diff --git a/src/components/MobileTopBar.tsx b/src/components/MobileTopBar.tsx
index e4238862..90d8cccd 100644
--- a/src/components/MobileTopBar.tsx
+++ b/src/components/MobileTopBar.tsx
@@ -10,7 +10,7 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
   const { user, metadata } = useCurrentUser();
 
   return (
-    <header className="sticky top-0 z-20 flex items-center px-3 h-10 bg-background/80 backdrop-blur-md border-b border-border sidebar:hidden">
+    <header className="sticky top-0 z-20 flex items-center px-3 h-12 bg-background/80 backdrop-blur-md border-b border-border sidebar:hidden">
       {/* Left: user avatar (empty when signed out) */}
       <div className="flex items-center justify-center w-7 shrink-0">
         {user && (
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 9d41a678..e498c42a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -6,9 +6,8 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 /**
- * Sticky header offset class for pages inside MainLayout.
- * On mobile the MobileTopBar is h-10 (40px) and sticky at top-0,
- * so page-level sticky headers must sit below it.
- * On desktop (sidebar breakpoint) the top bar is hidden, so top-0 applies.
+ * Sticky header class for pages inside MainLayout.
+ * On mobile, page headers scroll naturally with the content.
+ * On desktop (sidebar breakpoint) they stick to the top of the viewport.
  */
-export const STICKY_HEADER_CLASS = 'sticky top-10 sidebar:top-0';
+export const STICKY_HEADER_CLASS = 'sidebar:sticky sidebar:top-0';
diff --git a/src/pages/PostDetailPage.tsx b/src/pages/PostDetailPage.tsx
index 611a18e0..4314d425 100644
--- a/src/pages/PostDetailPage.tsx
+++ b/src/pages/PostDetailPage.tsx
@@ -234,7 +234,7 @@ function PostDetailShell({ children }: { children: React.ReactNode }) {
   return (
     <main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-l xl:border-r border-border min-h-screen">
       {/* Header — matches Ditto: ← Post Details */}
-      <div className="sticky top-10 sidebar:top-0 z-10 flex items-center gap-4 px-4 h-20 bg-background/80 backdrop-blur-md">
+      <div className="sidebar:sticky sidebar:top-0 z-10 flex items-center gap-4 px-4 h-20 bg-background/80 backdrop-blur-md">
         <button
           onClick={() => navigate(-1)}
           className="p-1.5 -ml-1.5 rounded-full hover:bg-secondary/60 transition-colors"