amadan
Merge branch 'fix/title-touch-size' into main
Merge fix/title-touch-size: the bar's title field doesn't zoom on tap [estilo-bar-title-input] gets font-size max(1rem, 1em) under (pointer: coarse), after the field's own rule, so iOS doesn't zoom when it's tapped. Found by the Sheets rastrillo migration (sheets #44).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2 files changed,
+31
−0
chrome/chrome.css+8 −0chrome/chrome_test.go+23 −0
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.009s ok amadan.net/oficina/estilo.git/brand 0.010s ok amadan.net/oficina/estilo.git/busy 0.006s ok amadan.net/oficina/estilo.git/callui 0.003s ok amadan.net/oficina/estilo.git/chrome 0.228s ? 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.007s ok amadan.net/oficina/estilo.git/savestatus 0.081s ok amadan.net/oficina/estilo.git/sky 0.022s ok amadan.net/oficina/estilo.git/theme 0.007s
diff --git a/chrome/chrome.css b/chrome/chrome.css| index 6bda384..74bd3d7 100644 |
| --- a/chrome/chrome.css |
| +++ b/chrome/chrome.css |
| @@ -135,6 +135,14 @@ |
| } |
| [estilo-bar-title-input]:hover { border-color: var(--rst-line); } |
| [estilo-bar-title-input]:focus { border-color: var(--rst-accent); outline: none; background: var(--rst-surface); } |
| +/* iOS zooms the page into a text field under 16px. tokens.css lifts fields |
| + to 16px on a coarse pointer, but with a bare `input` selector, which |
| + font: inherit above outweighs. Same rule, restated at this weight. */ |
| +@media (pointer: coarse) { |
| + [estilo-bar-title-input] { |
| + font-size: max(1rem, 1em); |
| + } |
| +} |
| [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 |
diff --git a/chrome/chrome_test.go b/chrome/chrome_test.go| index 61c4c3d..40cc07d 100644 |
| --- a/chrome/chrome_test.go |
| +++ b/chrome/chrome_test.go |
| @@ -490,3 +490,26 @@ func TestTheDoorStylesItsLinks(t *testing.T) { |
| } |
| } |
| } |
| + |
| +// iOS zooms the page into any text control under 16px. rastrillo's |
| +// tokens.css brings controls up to 16px on a coarse pointer with a bare |
| +// `input` selector, and the bar's title field outweighs that with |
| +// `font: inherit` at 14px, so it zoomed on every tap in every app with a |
| +// title (found in Sheets, 2026-10-01: its TestNoZoomOnTap). chrome.css |
| +// restates rastrillo's rule for the field, at the field's own weight, |
| +// after the field's own rule. |
| +func TestTitleFieldDoesNotZoomOnTap(t *testing.T) { |
| + src := string(CSS()) |
| + field := strings.Index(src, "[estilo-bar-title-input] {") |
| + if field < 0 { |
| + t.Fatal("chrome.css has no title field rule") |
| + } |
| + block := regexp.MustCompile(`@media \(pointer: coarse\) \{\s*\[estilo-bar-title-input\] \{\s*font-size: max\(1rem, 1em\);\s*\}\s*\}`) |
| + at := block.FindStringIndex(src) |
| + if at == nil { |
| + t.Fatal("chrome.css does not size the title field to max(1rem, 1em) under (pointer: coarse)") |
| + } |
| + if at[0] < field { |
| + t.Error("the coarse-pointer size comes before the title field's own rule, whose font: inherit then wins") |
| + } |
| +} |