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>
This commit is contained in:
2026-01-05 16:52:34 +01:00
parent c85a7f9258
commit 97494679ec
20 changed files with 397 additions and 197 deletions

View File

@@ -139,9 +139,12 @@
/* Kept same */
/* Tab Sizes */
--tab-padding: 0.625rem 1rem;
--tab-padding-y: 0.625rem;
--tab-padding-x: 1rem;
--tab-padding: var(--tab-padding-y) var(--tab-padding-x);
/* Reduced from 0.75rem 1.25rem */
--tab-font-size: 0.95rem;
--tab-pill-height: calc((var(--tab-font-size) * 1.2) + (var(--tab-padding-y) * 2));
/* Input Sizes */
--input-padding: 0.625rem 0.875rem;