Skip to content

Make .shell top/bottom margin responsive (clamp) so the footer isn't pushed off-screen on short viewports #45

Open

Description

@BrandonML

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions