You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Make .shell top/bottom margin responsive (clamp) so the footer isn't pushed off-screen on short viewports #45
NOTE: Issue suggested by Claude Design. Testing is needed to determine if this is a real issue before proceeding with the fix.
Problem
.shell uses a fixed margin: 8vh auto (extension/newtab.css).
On short viewports this reserves 8% of the height at the top and
bottom regardless of how tall the card actually is. Combined with a
tall portrait photo (.photo-portrait is height: min(65vh, 560px)),
the card plus the 32px-margin footer can push the footer below the
fold on a typical laptop — so the credit/links row is only reachable
by scrolling a page that is otherwise meant to be seen at a glance.
On large displays the 8vh is doing real work; it's what gives the new
tab its calm, unhurried feel. So the fix is not simply to reduce it.
Suggested change
.shell { margin:clamp(24px,8vh,96px) auto; }
Keeps the current proportional spacing where it looks good, floors it
at 24px so short viewports don't lose the top eighth, and caps it at
96px so very tall displays don't push the card uncomfortably far down.
Testing notes
Needs real measurement rather than eyeballing. Please check before and
after at:
1280x720 and 1366x768 with a tall portrait photo (the .photo-portrait tier, ratio > 1.35) and every optional card row
present — chips, adoption fee, distance, updated, rescue link, and
both card actions. That's the worst case for total card height.
The same viewports with a normal landscape photo, to confirm the
layout doesn't now read as top-heavy.
A tall display (e.g. a 1440x2560 portrait monitor) to confirm the
96px cap still feels generous rather than cramped.
The first-run state (#location-panel visible, no card) and the
no-results notice state. Both are much shorter than a card, and
they're where a too-small top margin would show first.
Ideal outcome: at 1280x720 with a tall portrait card, the footer is
visible without scrolling — or at minimum measurably closer to the
fold than today.
The clamp() values are a starting point, not a conclusion. Adjust
based on what the measurements actually show.
Activity