Skip to content

fix(frontend): prevent signup header from sticking to top edge - #7165

Merged
akhilmhdh merged 1 commit into
Infisical:mainfrom
jal-co:fix/signup-header-stuck-to-top
Jul 6, 2026
Merged

akhilmhdh merged 1 commit into
Infisical:mainfrom
jal-co:fix/signup-header-stuck-to-top

Conversation

@jal-co

@jal-co jal-co commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

Context

Closes #7166.

On the signup page, the content (OAuth buttons + email form) is tall enough to overflow the max-h-screen scroll container. When it overflows, the header, the logo and the top-right "Log In" button scrolls flush against the very top edge of the page with no breathing room.

This adds py-4 to the signup page's scroll container (frontend/src/pages/auth/SignUpPage/SignUpPage.tsx), matching its existing px-4 horizontal inset, so the header keeps a consistent top inset even when the content overflows. Scoped to the signup page only. The shared AuthPageHeader is untouched, so the login page (shorter content, no overflow) is unchanged.

Screenshots

Before:
signup-header-before

After:
signup-header-after

Steps to verify the change

  1. Open the signup page and reduce the viewport height so the content overflows.
  2. Scroll to the top.
  3. Before: the logo and "Log In" button sit flush against the top edge. After: they keep a top inset matching the horizontal padding.

Type

  • Fix
  • Feature
  • Improvement
  • Breaking
  • Docs
  • Chore

Checklist

  • Title follows the conventional commit format: type(scope): short description
  • Tested locally
  • Updated docs (if needed) — n/a
  • Updated CLAUDE.md files (if needed) — n/a
  • Read the contributing guide

The signup page's tall content (OAuth buttons + email form) overflows
the max-h-screen scroll container, causing the header — logo and
top-right "Log In" button — to scroll flush against the top edge.

Add py-4 to the scroll container so the header keeps a top inset that
matches its horizontal padding, even when content overflows. The login
page is unaffected as its shorter content does not overflow.
@jal-co
jal-co marked this pull request as ready for review July 5, 2026 20:04
@greptile-apps

greptile-apps Bot commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR adds py-4 to the signup page's root scroll container, making the vertical inset consistent with the already-present horizontal px-4 so the header stays off the top edge when content overflows.

  • The one-line Tailwind change is tightly scoped to SignUpPage.tsx and does not touch AuthPageHeader or any shared component.
  • The symmetry between px-4 and py-4 aligns with the team's spacing consistency guideline.

Confidence Score: 5/5

Safe to merge — the change is a single Tailwind class addition scoped entirely to the signup page's root container.

The diff adds one Tailwind utility class (py-4) to a single component, matching the existing horizontal padding and fixing the described overflow layout issue. There are no logic changes, no shared-component modifications, and no security surface.

No files require special attention.

Important Files Changed

Filename Overview
frontend/src/pages/auth/SignUpPage/SignUpPage.tsx Adds py-4 to the scroll container so vertical padding matches the existing horizontal px-4, preventing the header from sitting flush against the top edge on overflow.

Reviews (1): Last reviewed commit: "fix(frontend): prevent signup header fro..." | Re-trigger Greptile

@akhilmhdh
akhilmhdh merged commit 2179be1 into Infisical:main Jul 6, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Signup page header sticks to top edge when content overflows

2 participants