Design polish: settings spacing, focus rings, tagline placement - #47
Merged
Merged
Conversation
Inter was declared first in the font-family stack but never shipped (only fraunces.woff2 loads), so it silently fell through to the system-ui fallback for virtually every user anyway. Closes #42. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Buttons, .profile links, and anchors get a moss focus-visible ring (not :focus, so mouse clicks don't leave one behind) and ease their hover states instead of snapping. Share-menu items get an inset ring since they sit flush inside a padded rounded container where an outset ring would get clipped. Respects prefers-reduced-motion. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds a subhead under "Your Location" and a hint line below the zip field so the panel's spacing comes from content instead of margin fine-tuning, restyles the zip field as a Bootstrap-style floating label, and joins the input with Save into a single bordered control with one dividing seam instead of two separate-looking pieces. While wiring this up, fixed two pre-existing issues the new markup would otherwise have exposed or introduced: - .location-panel p (class+type selector) has higher specificity than a same-context single class, so it was already silently overriding the intended margins here -- scoped the new spacing rules through .location-panel to actually take effect, without touching the generic rule itself (#saved still needs it). - The zip field's overflow:hidden (needed to clip Save's square corners to the shared border-radius) would also clip a :focus-visible ring on Save, the same way item 2's share-menu items needed an inset ring instead of an outset one. Gave Save the same inset-ring treatment so keyboard focus stays visible. Also switched the "or" divider from ::before/::after pseudo-elements to real span elements per the design spec, since keeping both would have rendered four line segments instead of two. Closes #30. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Wraps the wordmark, a hairline divider, and the tagline in a .brand flex container as the header's first child, sharing a baseline so the italic tagline doesn't hang below the wordmark. Removed from the footer, which now starts with the credit line. Below 460px -- the one width where this row can crowd -- the rule and tagline drop out and the header returns to today's layout. Closes #25. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This was
linked to
issues
Sep 18, 2026
maxlength/pattern only catch a bad ZIP at validation time, after submit -- a user could still type or paste letters/symbols into the field itself. Filtering on input is a better UX than letting them in and then rejecting the value. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Also updates the CWS listing's version history table, and fixes the screenshot-capture harnesses (screenshot-frame.source.html, screenshot-frame-options.source.html), which hand-copy newtab.html/ options.html's markup rather than loading the real files -- they still had the pre-#25/#30 header, footer, and settings-panel structure, so screenshots recaptured off the old copies would have silently shown the old design. Screenshots 1 (main card), 3 (first-run), 4 (settings), and 5 (fee-tags) include the header and/or footer in their crop and should be regenerated before this version is submitted to either store; 2 (explore) and 6 (share) crop the header out of frame and are unaffected. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Recaptured all 6 screenshots at 1280x800 via the now-fixed screenshot-frame(-options).source.html harnesses, using chrome-devtools-mcp against the real newtab.css/newtab.js/options.js unmodified (same capture method as the originals -- see cws/CHROMEWEBSTORE.md's Screenshot Notes). 1, 3, 4, and 5 visibly change (header now shows the tagline beside the wordmark; the settings panel shows the new floating label + joined Save group); 2 and 6 crop the header out of frame and are byte-different but not visibly different -- recaptured anyway for consistency now that the harness matches the real markup. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the approved design handoff (
design_handoff_tabby_polish/README.md, now removed) covering three linked issues:Interfrom the font stack; it was never shipped, so this is a no-op visually and just makes the CSS honest..brandflex container, sharing a baseline, with a hairline divider between them. Drops out below 460px so the header row never crowds.overflow: hiddenparent) and eased hover transitions across buttons,.profilelinks, and anchors, respectingprefers-reduced-motion.While implementing the design spec, I found and fixed three latent issues it would have introduced or left in place:
.location-panel p's specificity was silently overriding the new.panel-sub/.field-hint/.or-dividermargins — scoped the new rules through.location-panelso they actually apply, without touching the generic rule (#savedstill needs it).overflow: hidden(needed to clip Save's square corner to the shared radius) would also clip a:focus-visiblering on Save — gave it the same inset-ring treatment as the share-menu items.<span>divider lines while the existing CSS still drew them via::before/::after, which would have rendered four line segments — switched to styling the real spans and dropped the pseudo-elements.Existing zip validation (
maxlength,pattern) and all JS-side id/handler wiring are unchanged.Test plan
npm test— 220/220 passing, including two new regression tests for the fragile floating-label DOM structure (Improve UI, spacing, and layout of settings view #30) and the header/footer restructuring (Reposition tagline, make more noticable #25)Closes #30, #25, #42.