From 5a8a9376ad3948ea08e6091c2b00eb99f3f2408f Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Mon, 16 Feb 2026 17:30:01 -0600
Subject: [PATCH] Shrink mobile top bar to h-10 (40px) and fix tab sticky
 offset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header: h-10 fixed height, smaller avatar (size-7), smaller logo (22px),
  tighter padding (px-3) — eliminates the gap/clipping between header
  and sticky tabs
- Tabs sticky offset updated to top-10 (40px) to sit flush under header

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/Feed.tsx         |  2 +-
 src/components/MobileTopBar.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Feed.tsx b/src/components/Feed.tsx
index b7974ad7..4d5950c3 100644
--- a/src/components/Feed.tsx
+++ b/src/components/Feed.tsx
@@ -15,7 +15,7 @@ export function Feed() {
       <ComposeBox compact />
 
       {/* Tabs — stick below the mobile top bar (48px) on small screens, top-0 on desktop */}
-      <div className="flex border-b border-border sticky top-[48px] sidebar:top-0 bg-background/80 backdrop-blur-md z-[5]">
+      <div className="flex border-b border-border sticky top-10 sidebar:top-0 bg-background/80 backdrop-blur-md z-[5]">
         <TabButton
           label="Follows"
           active={activeTab === 'follows'}
diff --git a/src/components/MobileTopBar.tsx b/src/components/MobileTopBar.tsx
index 1df2df77..053b1391 100644
--- a/src/components/MobileTopBar.tsx
+++ b/src/components/MobileTopBar.tsx
@@ -11,14 +11,14 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
   const { user, metadata } = useCurrentUser();
 
   return (
-    <header className="sticky top-0 z-20 flex items-center justify-between px-4 py-2 bg-background/80 backdrop-blur-md border-b border-border sidebar:hidden">
+    <header className="sticky top-0 z-20 flex items-center justify-between px-3 h-10 bg-background/80 backdrop-blur-md border-b border-border sidebar:hidden">
       {/* Left: user avatar or login */}
-      <div className="w-10">
+      <div className="w-8">
         {user ? (
-          <button onClick={onAvatarClick} className="rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background">
-            <Avatar className="size-9">
+          <button onClick={onAvatarClick} className="rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 focus:ring-offset-background">
+            <Avatar className="size-7">
               <AvatarImage src={metadata?.picture} alt={metadata?.name} />
-              <AvatarFallback className="bg-primary/20 text-primary text-xs">
+              <AvatarFallback className="bg-primary/20 text-primary text-[10px]">
                 {(metadata?.name?.[0] || '?').toUpperCase()}
               </AvatarFallback>
             </Avatar>
@@ -29,10 +29,10 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
       </div>
 
       {/* Center: Mew logo */}
-      <MewLogo size={28} />
+      <MewLogo size={22} />
 
       {/* Right: spacer for symmetry */}
-      <div className="w-10" />
+      <div className="w-8" />
     </header>
   );
 }