martin/musicmouse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Give the tab rail its own glass bar and reserve space for it

Browse Source 
The three tab buttons now share one frosted glass pill instead of each
floating separately, and BrowseView/RoomView reserve TAB_RAIL_CLEARANCE
of right-side padding so a full-width row or grid never renders under
it - verified against the real library, where dense rows (e.g. Conni's
82 audiobooks) previously butted right up against the rail.

Also gitignore the real (non-.example) tippen-curriculum.yml and
tippen-progress.json, matching config.yml's own privacy treatment,
since the curriculum now contains real reward paths into a personal
library.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Martin Bauer
2026-09-13 00:16:42 +02:00
parent 57ead93497
commit b8f9f6d537
5 changed files with 40 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/BrowseView.tsx
View File

@@ -30,6 +30,7 @@ import {
rowTint,
SHOW_ROW_ICONS,
SHOW_ROW_TITLES,
TAB_RAIL_CLEARANCE,
} from "../lib/theme";
import { Cover } from "./Cover";
@@ -142,7 +143,9 @@ export function BrowseView({
<div
ref={scroller}
className={ANIMATE_VIEW_TRANSITIONS ? "view-enter" : undefined}
style={{ flex: 1, overflow: "auto", minHeight: 0, padding: "14px 32px 250px" }}
// Right padding reserves room for the tab rail's own glass bar (see
// TAB_RAIL_CLEARANCE) so a full-width shelf row never renders under it.
style={{ flex: 1, overflow: "auto", minHeight: 0, padding: `14px ${TAB_RAIL_CLEARANCE}px 250px 32px` }}
>
{shelves.map(({ group: shelfGroup, categories: shelfCategories }, index) => (
<div
@@ -299,7 +302,9 @@ export function BrowseView({
ref={scroller}
key={`${group}:${category}:${mode}`}
className={ANIMATE_VIEW_TRANSITIONS ? "view-enter" : undefined}
style={{ flex: 1, overflow: "auto", minHeight: 0, padding: "14px 32px 250px" }}
// Right padding reserves room for the tab rail's own glass bar (see
// TAB_RAIL_CLEARANCE) so a full-width row/grid never renders under it.
style={{ flex: 1, overflow: "auto", minHeight: 0, padding: `14px ${TAB_RAIL_CLEARANCE}px 250px 32px` }}
>
{songs.length > 0 && (
<div style={{ marginBottom: 30 }}>