Make mobile top bar slightly taller (h-10→h-12) and unstick page headers on mobile

- 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

@@ -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

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 && (

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';

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"