infisical icon indicating copy to clipboard operation
infisical copied to clipboard

fix(auth): ensure “Sign Up” button remains visible on short viewports (100svh + overflow-y-auto)

Open Hritwik001 opened this issue 2 months ago • 2 comments

## ✨ Summary

Fixed an issue where the “Sign Up” button on the “Almost there!” onboarding page was partially hidden on short viewport heights (e.g., small laptops, split-screen, or mobile browsers).


## 🧠 Root Cause

The outer wrapper used a fixed h-screen height without vertical scrolling. When the viewport height shrank below ~700 px, the button was clipped and inaccessible.


## 🛠️ Fix

  • Replaced h-screen with min-h-[100svh] for correct small-viewport behavior.
  • Added overflow-y-auto to enable vertical scrolling when content exceeds viewport height.

## ✅ Testing

  • Verified build passes (npm run build).
  • Verified visually on Chrome (Windows 11) at 600–1080 px height.
  • “Sign Up” CTA is now always visible and clickable.
  • No layout shift or horizontal scroll introduced.

## 🔗 Closes

Fixes #4698 : https://github.com/Infisical/infisical/issues/4698

Hritwik001 avatar Oct 21 '25 10:10 Hritwik001

:white_check_mark: Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
:white_check_mark: Open Source Security 0 0 0 0 0 issues

:computer: Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

maidul98 avatar Oct 21 '25 10:10 maidul98

Hi 👋, this PR fixes the issue where the “Sign Up” button on the “Almost there!” screen was getting cut off on smaller screens.

Fix Summary

  • Replaced h-screen with min-h-[100svh]
  • Added overflow-y-auto so the page can scroll properly

Tested at different screen heights (600–1080 px).
The “Sign Up” button is now fully visible and clickable. ✅

Happy to make any adjustments if needed. 🙌

Hritwik001 avatar Oct 21 '25 10:10 Hritwik001