amadan
chrome: a rail account's panel is the foot's width, not clipped by the rail
At 1440 in Fichas the 15rem panel, hung from the rail's inline start, ran past the rail's edge, and the rail (overflow-y: auto) clipped it. The panel is now the foot's own width, edge to edge with its trigger. The test fails on the previous rule.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2 files changed,
+12
−9
chrome/chrome.css+6 −4chrome/chrome_test.go+6 −5
CI passed — run details
CI log
=== modcache === all modules verified === vet === CGO_ENABLED=0 go vet ./... === fmt === === build === CGO_ENABLED=0 go build -buildvcs=false ./... === go-test === CGO_ENABLED=0 go test -count=1 ./... ok amadan.net/oficina/estilo.git/base 0.004s ok amadan.net/oficina/estilo.git/brand 0.003s ok amadan.net/oficina/estilo.git/busy 0.003s ok amadan.net/oficina/estilo.git/callui 0.004s ok amadan.net/oficina/estilo.git/chrome 0.224s ? amadan.net/oficina/estilo.git/cmd/oficina-notices [no test files] ok amadan.net/oficina/estilo.git/credits 0.005s ok amadan.net/oficina/estilo.git/credits/catalog 0.005s ok amadan.net/oficina/estilo.git/homeconnect 0.005s ok amadan.net/oficina/estilo.git/internal/lint 0.004s ? amadan.net/oficina/estilo.git/internal/tokencheck [no test files] ok amadan.net/oficina/estilo.git/menu 0.008s ok amadan.net/oficina/estilo.git/savestatus 0.074s ok amadan.net/oficina/estilo.git/sky 0.021s ok amadan.net/oficina/estilo.git/theme 0.006s
diff --git a/chrome/chrome.css b/chrome/chrome.css| index 38e5c7e..71c0490 100644 |
| --- a/chrome/chrome.css |
| +++ b/chrome/chrome.css |
| @@ -211,9 +211,11 @@ |
| /* The account at a sidebar rail's foot (Account.Rail), for an app whose |
| chrome is a rail rather than the bar. The trigger is a row the rail's |
| width: the avatar, then who is signed in, cut short with an ellipsis. |
| - It stays in the page flow, so its highlight stays square. The panel |
| - hangs from the rail's inline start: from the inline end of a foot |
| - narrower than the panel it would run off the window's start edge. */ |
| + It stays in the page flow, so its highlight stays square. The panel is |
| + the foot's own width, edge to edge with the trigger: hung from the |
| + inline end of a foot narrower than the bar's 15rem panel it ran off |
| + the window's start edge, and from the inline start it ran past the |
| + rail, whose overflow-y: auto clips it (Fichas' first screenshot). */ |
| [estilo-account~="rail"] > [estilo-bar-trigger] { |
| justify-content: flex-start; |
| gap: var(--rst-sp-2); |
| @@ -223,7 +225,7 @@ |
| color: var(--rst-text); |
| } |
| [estilo-account-who] { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| -[estilo-account~="rail"] > [estilo-account-panel] { inset-inline-start: 0; inset-inline-end: auto; } |
| +[estilo-account~="rail"] > [estilo-account-panel] { inset-inline: 0; inline-size: auto; min-inline-size: 0; max-inline-size: none; } |
| /* A drop-up where the rail is the viewport's height (rastrillo's shell |
| breakpoint): below the foot there is only the window's edge. Below |
| 800px the rail is a disclosure at the top of the page, with the page |
diff --git a/chrome/chrome_test.go b/chrome/chrome_test.go| index a1fff3c..fd3a4b2 100644 |
| --- a/chrome/chrome_test.go |
| +++ b/chrome/chrome_test.go |
| @@ -539,15 +539,16 @@ func TestTheAccountCanSitAtARailsFoot(t *testing.T) { |
| } |
| src := string(CSS()) |
| - // It opens upward where the rail is the viewport's height, and from the |
| - // rail's inline start: hung from the inline end of a foot narrower than |
| - // the panel, it would run off the window's start edge. |
| + // It opens upward where the rail is the viewport's height, and it is |
| + // the foot's own width: hung from the inline end of a foot narrower |
| + // than the bar's panel it ran off the window's start edge, and from the |
| + // inline start it ran past the rail, which scrolls and so clips. |
| wide := regexp.MustCompile(`@media \(min-width: 800px\) \{\s*\[estilo-account~="rail"\] > \[estilo-account-panel\] \{[^}]*inset-block-start: auto;[^}]*inset-block-end: calc\(100% \+ 4px\);`) |
| if !wide.MatchString(src) { |
| t.Error("chrome.css does not open the rail account upward from 800px") |
| } |
| - if !regexp.MustCompile(`\[estilo-account~="rail"\] > \[estilo-account-panel\] \{[^}]*inset-inline-start: 0;[^}]*inset-inline-end: auto;`).MatchString(src) { |
| - t.Error("chrome.css does not hang the rail account's panel from the rail's inline start") |
| + if !regexp.MustCompile(`\[estilo-account~="rail"\] > \[estilo-account-panel\] \{[^}]*inset-inline: 0;[^}]*inline-size: auto;[^}]*min-inline-size: 0;`).MatchString(src) { |
| + t.Error("chrome.css does not size the rail account's panel to the rail's foot") |
| } |
| // The trigger is in the page flow: square, like every bar trigger. |
| if regexp.MustCompile(`\[estilo-account~="rail"\] > \[estilo-bar-trigger\] \{[^}]*border-radius: (?:[1-9]|var)`).MatchString(src) { |