feat: improve mobile header layout and tab navigation (#327)

Enable horizontal scrolling for main navigation tabs in header
Prevent back button from shrinking on mobile by fixing flex behavior
Show badges and activity dots on tab buttons

packages/ui/src/components/layout/Header.tsx

@@ -893,7 +893,7 @@ export const Header: React.FC = () => {
 
   const renderMobile = () => (
     <div className="app-region-drag relative flex items-center justify-between gap-2 px-3 py-2 select-none">
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 shrink-0">
         {/* Show back button when sessions sidebar is open, otherwise show sessions toggle */}
         {isSessionSwitcherOpen ? (
           <button
@@ -929,7 +929,9 @@ export const Header: React.FC = () => {
 
       {/* Hide tabs and right-side buttons when sessions sidebar is open */}
       {!isSessionSwitcherOpen && (
-        <div className="app-region-no-drag flex items-center gap-1">
+        <div className="app-region-no-drag flex min-w-0 flex-1 items-center">
+          <div className="flex min-w-0 flex-1 overflow-x-auto overflow-y-hidden scrollbar-hidden touch-pan-x overscroll-x-contain">
+            <div className="flex w-max items-center gap-1 pr-1">
             <div className="flex items-center gap-0.5" role="tablist" aria-label="Main navigation">
               {tabs.map((tab) => {
                 const isActive = activeMainTab === tab.id;
@@ -1136,6 +1138,8 @@ export const Header: React.FC = () => {
               </TooltipContent>
             </Tooltip>
             </div>
+          </div>
+        </div>
       )}
     </div>
   );