From 0f922c79f428d9214eafebc5a286d80f7f9d20f3 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Mon, 16 Feb 2026 17:31:54 -0600
Subject: [PATCH] Fix emoji picker z-index (tabs to z-[1]) and center avatar in
 mobile top bar

- Tabs z-index lowered to z-[1] so the emoji popover portal (z-50)
  always renders above them
- Mobile top bar avatar container uses flex centering instead of
  fixed width, ensuring the profile picture is visually centered
- Logo wrapped in flex-1 centered container for proper horizontal balance

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

diff --git a/src/components/Feed.tsx b/src/components/Feed.tsx
index 4d5950c3..6bac0f6e 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-10 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-[1]">
         <TabButton
           label="Follows"
           active={activeTab === 'follows'}
diff --git a/src/components/MobileTopBar.tsx b/src/components/MobileTopBar.tsx
index 053b1391..6bade6e1 100644
--- a/src/components/MobileTopBar.tsx
+++ b/src/components/MobileTopBar.tsx
@@ -11,9 +11,9 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
   const { user, metadata } = useCurrentUser();
 
   return (
-    <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">
+    <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">
       {/* Left: user avatar or login */}
-      <div className="w-8">
+      <div className="flex items-center justify-center w-7 shrink-0">
         {user ? (
           <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">
@@ -29,10 +29,12 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
       </div>
 
       {/* Center: Mew logo */}
-      <MewLogo size={22} />
+      <div className="flex-1 flex items-center justify-center">
+        <MewLogo size={22} />
+      </div>
 
       {/* Right: spacer for symmetry */}
-      <div className="w-8" />
+      <div className="w-7 shrink-0" />
     </header>
   );
 }