amadan
No zoom on tap for the title, the cell editor and the size fields
tokens.css's touch rule is a bare `input` selector. The cell editor (`font: inherit` in sheets.css) and estilo's title field outweigh it and stayed 14px, so iOS still zoomed on the two fields tapped most. They get the same max(1rem, 1em) under a coarse pointer. TestNoZoomOnTap is green. On a touch screen the Format menu's Set buttons hung 11-21px out of the panel (before the upgrade too; 16px fields made it 21px everywhere). The label column narrows to 5.5rem there, and both rows keep it.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1 file changed,
+25
−0
internal/sheets/static/sheets.css+25 −0
diff --git a/internal/sheets/static/sheets.css b/internal/sheets/static/sheets.css| index b4b7693..05fca0f 100644 |
| --- a/internal/sheets/static/sheets.css |
| +++ b/internal/sheets/static/sheets.css |
| @@ -676,6 +676,20 @@ |
| color: inherit; |
| } |
| +/* iOS zooms the page into any text control under 16px, and tokens.css |
| + * brings controls up to 16px where the pointer is coarse. Two of ours |
| + * set `font: inherit` with a selector that outweighs tokens.css's bare |
| + * `input`, and fell back to 14px: the cell editor above, and estilo's |
| + * title field in the bar. Same rule, same max(), restated here at their |
| + * weight. TestNoZoomOnTap (make test-browser) measures both. */ |
| +@media (pointer: coarse) { |
| + [data-sheet-grid] .jss_worksheet td input, |
| + [data-sheet-grid] .jss_worksheet td textarea, |
| + [estilo-bar-title-input] { |
| + font-size: max(1rem, 1em); |
| + } |
| +} |
| + |
| [data-sheet-grid] .jss_container, |
| [data-sheet-grid] .jss_content { |
| background-color: var(--rst-bg); |
| @@ -1266,6 +1280,17 @@ |
| padding-inline: var(--rst-sp-2); |
| } |
| +/* On a touch screen the field is 16px type (no zoom on tap) and the |
| + * button is padded for a finger, and the row no longer fits: Set hung |
| + * 11-21px out of the panel's right edge. The label column gives the room |
| + * back; "Column width" still sets on one line in 5.5rem, and both rows |
| + * keep the same column, so they stay in step. */ |
| +@media (pointer: coarse) { |
| + [data-size-form] label { |
| + flex-basis: 5.5rem; |
| + } |
| +} |
| + |
| /* The referenced range is separate from the cell receiving the formula. */ |
| [data-sheet-grid] .jss_worksheet > tbody > tr > td[data-formula-reference] { |
| outline: 2px solid var(--rst-accent); |