amadan
Keep the bar's controls reachable when the title is being renamed on a phone
Below 800px the Rename button no longer takes a place in the row, where it sat under Menu (390px) or the switcher (320px) and a click at its centre opened them instead. The field may shrink to nothing but its padding, and on focus the button floats just under it, over the page. Found by the first review (Astra, #10); the new reach checks in polish-audit/r2-chrome-check.mjs failed on 5b397d9 at 390 and 320px, with and without the switcher, and pass on this.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2 files changed,
+28
−0
chrome/chrome.css+19 −0chrome/chrome_test.go+9 −0
CI passed — run details
CI log
=== vet === CGO_ENABLED=0 go vet ./... === fmt === === build === CGO_ENABLED=0 go build ./... === 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.002s ok amadan.net/oficina/estilo.git/callui 0.004s ok amadan.net/oficina/estilo.git/chrome 0.080s ? 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.006s 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.005s ok amadan.net/oficina/estilo.git/savestatus 0.073s ok amadan.net/oficina/estilo.git/theme 0.004s
diff --git a/chrome/chrome.css b/chrome/chrome.css| index 0a1bbd4..d40baff 100644 |
| --- a/chrome/chrome.css |
| +++ b/chrome/chrome.css |
| @@ -118,6 +118,25 @@ |
| [estilo-bar-title-input]:focus { border-color: var(--rst-accent); outline: none; background: var(--rst-surface); } |
| [estilo-bar-title-submit] { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; white-space: nowrap; } |
| [estilo-bar-title]:focus-within [estilo-bar-title-submit] { position: static; clip-path: none; inline-size: auto; block-size: 2rem; overflow: visible; flex: none; } |
| +/* Below the shell breakpoint the row has no room for the button beside the |
| + field: it would sit under Menu or the switcher, and a click at its centre |
| + would open them instead (found in the first review, at 390px and 320px). |
| + So the field takes whatever width is left, down to nothing but its own |
| + padding, and on focus the button floats just under it, over the page, |
| + where nothing in the bar competes for it. Enter renames at every width. */ |
| +@media (max-width: 799.98px) { |
| + [estilo-bar-title] { position: relative; } |
| + [estilo-bar-title-input] { min-inline-size: 0; } |
| + [estilo-bar-title]:focus-within [estilo-bar-title-submit] { |
| + position: absolute; |
| + inset-block-start: calc(100% + 0.5rem); |
| + inset-inline-start: var(--rst-sp-3); |
| + border: 1px solid var(--rst-line); |
| + border-radius: var(--estilo-float-radius, 9px); /* a float */ |
| + background: var(--rst-surface); |
| + box-shadow: var(--rst-shadow-pop); |
| + } |
| +} |
| /* The app switcher: a float, so its tiles may be rounded. */ |
| [estilo-switcher] { position: relative; } |
diff --git a/chrome/chrome_test.go b/chrome/chrome_test.go| index 48baf53..c78bdd1 100644 |
| --- a/chrome/chrome_test.go |
| +++ b/chrome/chrome_test.go |
| @@ -39,6 +39,15 @@ func TestBarHeightIsFixedAndPublic(t *testing.T) { |
| t.Errorf("chrome.css lost %q", want) |
| } |
| } |
| + // Narrow: the title field may shrink to nothing and the Rename button |
| + // floats under it rather than taking room from Menu and the switcher. |
| + // The browser proof is polish-audit/r2-chrome-check.mjs's reach checks. |
| + narrow := src[strings.LastIndex(src, "@media (max-width: 799.98px)"):] |
| + for _, want := range []string{"[estilo-bar-title-input] { min-inline-size: 0; }", "[estilo-bar-title]:focus-within [estilo-bar-title-submit] {\n position: absolute;"} { |
| + if !strings.Contains(narrow, want) { |
| + t.Errorf("the narrow title layout lost %q", want) |
| + } |
| + } |
| if regexp.MustCompile(`\[estilo-bar\]\s*\{[^}]*min-block-size`).MatchString(src) { |
| t.Error("the bar declares a min-block-size: it could grow") |
| } |