feat(ui): join the open right rail tab to its panel

The open tab and its panel share one glass surface and one outline, like a folder tab: the panel card draws no border of its own, the rail's ::before draws the outline with a notch at the tab, the tab closes the shape with its own borders and two concave fillets round the inner corners. The strip publishes the open tab's extent and the panel's height on the rail; a short panel grows to reach its tab. Cyber joins square below its chamfer. Unselected tabs are plain labels.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
This commit is contained in:
German KhokhlovandClaude Fable 5.1 committed 2026-10-27 17:26:59 +04:00
1 parent f2e23249eb
commit 65c1ae67f2
6 files changed
+345 -45

No files matched your search

+15
View File
@@ -1509,6 +1509,21 @@ the panels' own translated header titles. The strip marks the rail with
rail without the strip keeps its legacy geometry. Phones hide the strip and
keep the sheet shell; Cockpit hides the rail and the strip with it.
The open tab and its panel read as one shape, like a folder tab: they share
the glass surface and one outline, and the other tabs are borderless labels.
The panel card keeps its surface but draws no border; the rail's `::before`
draws the outline around the card with a notch where the tab joins, the open
tab closes the shape with its own top, right and bottom borders, and two
concave fillets round the inner corners (Cyber's chamfered frames join
square, and its strip starts below the frame's upper chamfer). The strip
publishes the join on the rail as inline custom properties, re-measured
through a ResizeObserver and on strip scroll: `--rail-tab-top` and
`--rail-tab-bottom` place the notch and set the open panel's minimum height,
so a short panel such as Context still reaches its tab, and
`--rail-panel-height` sizes the outline, since the rail is taller than its
panel in the focus layout. The first tab starts level with the panel's top
edge, so the outline's top runs straight into it with no corner.
## Phone layout
At 720px and narrower, `src/ui/mobileShell.js` keeps the globe full screen and