Add separate MobileTitleBar component for mobile layout

- Create MobileTitleBar component with fixed top position
- Split title bar from tabs bar on mobile (title always on top)
- Add data-has-actions attribute for action button detection
- Track --tab-pill-height CSS variable for tab buttons
- Remove extra padding from mobile content padding-top
- Hide tabs container when no tabs or actions present

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/pages/admin/ThemeSettings.tsx

@@ -6,6 +6,7 @@ import { useAuth } from '../../contexts/AuthContext';
 import { useSidebar } from '../../contexts/SidebarContext';
 import type { SidebarMode } from '../../contexts/SidebarContext';
 import { ChromePicker, HuePicker } from 'react-color';
+import MobileTitleBar from '../../components/MobileTitleBar';
 import { SwipeTabs } from '../../components/SwipeTabs';
 import TabsScroller from '../../components/TabsScroller';
 import '../../styles/ThemeSettings.css';
@@ -778,12 +779,14 @@ export default function ThemeSettings() {
                     {tooltip.text}
                 </div>
             )}
+            <MobileTitleBar
+                title={t.theme.title}
+                menuLabel={t.theme.toggleMenu}
+                onMenuClick={toggleMobileMenu}
+            />
             {/* Modern Tab Navigation */}
             <div className="page-tabs-container">
                 <TabsScroller className="page-tabs-slider" showArrows>
-                    <button className="mobile-menu-btn" onClick={toggleMobileMenu} aria-label={t.theme.toggleMenu}>
-                        <span className="material-symbols-outlined">menu</span>
-                    </button>
                     <div className="page-title-section">
                         <span className="page-title-text">{t.theme.title}</span>
                     </div>