mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-06 07:29:42 +02:00
fix(mobile): make the phone header tab strip read as live tabs
On a phone every inactive tab rendered transparent: grey 11px text floating in unmarked gaps, a boxed Alt+N digit in each tab (a phone has no Alt key), names capped at 50px so a shared `w1-` prefix was most of what showed, and the tab that did not fit was chopped mid-word against the connection dot. The strip looked like a row of disabled labels. Phone block of mobile.css only: - Every header tab is a chip, filled and bordered from the skin's --control-* tokens, name in --text at weight 500. Written `:where(.header) .session-tab` so it stays at (0,1,0): the per-colour left border still wins, and sidebar layout (where the list leaves the header) is untouched. - The Alt+N digit is hidden in the header; inactive tabs drop their empty .tab-actions container, which padded the chip's right side. - Name cap 50px -> 80px, status dot 4px -> 6px, strip gap 2px -> 6px. - Scroll-driven edge fade: a mask on the strip whose widths follow its own inline scroll timeline (registered @property lengths), so the clipped tab dissolves into the edge. No JS; a strip that does not overflow gets no mask, and browsers without scroll timelines keep the old hard edge. The tap-zone arithmetic comment is updated for the numberless phone tabs and the bigger dot (the required reserve drops from 38px to 36px; the 44px min-width stays). test/mobile-tab-strip-chips.test.ts pins the (0,1,0) selector, the top-level @property registration and the timeline-after-shorthand order, each of which fails silently otherwise. test/mobile/tabs.test.ts follows the new name cap. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -88,9 +88,10 @@ describe('Tab Navigation', () => {
|
||||
if (tabNameExists) {
|
||||
const maxWidth = await getCSSProperty(page, SELECTORS.TAB_NAME, 'max-width');
|
||||
const maxWidthPx = parseFloat(maxWidth);
|
||||
// Should be 50px on mobile
|
||||
expect(maxWidthPx).toBeLessThanOrEqual(60);
|
||||
expect(maxWidthPx).toBeGreaterThan(0);
|
||||
// 80px on phones: wide enough to get past a shared `w1-` prefix,
|
||||
// still short enough that several tabs fit the strip.
|
||||
expect(maxWidthPx).toBeLessThanOrEqual(96);
|
||||
expect(maxWidthPx).toBeGreaterThanOrEqual(72);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user