Skip to content

ui/ux: missing top and bottom padding/margin on authentication form cards #508

@atharv96k

Description

@atharv96k

📜 Description

On both the /signup and /login layout views, the main form authentication card wraps too tightly around its vertical inner child components. There is an inadequate spacing margin at both the very top (above the main application logo/heading) and the absolute bottom (below the redirection text link fields).

This layout compression becomes visually worse when interactive validation error message alerts drop into view, pushing the footer text strings flush against the card's rounded borders with zero padding.

🧪 Steps to Reproduce

  1. Start the application locally and navigate to either the /signup or /login pages.
  2. Observe the minimal clearance gap separating the top header content from the top boundary line of the card.
  3. Trigger an operational warning message (e.g., input an invalid value or submit blank fields) to dynamically push the footer section down.
  4. Observe the bottom edge of the container frame directly underneath the text reading "Already have an account? Sign in here" or "Don't have an account? Sign Up".

🎯 Expected vs. Actual Behavior

  • Expected: The authentication layout card should retain stable vertical structural padding (e.g., using unified Tailwind classes like py-10 or a pairing of pt-10 pb-10) so that structural components maintain an even, legible separation barrier away from the boundary outlines on all screen resolutions.
  • Actual: Elements sit flush against both the top and bottom internal layout limits with no breathing room or design safety buffers.

💻 Technical Analysis & Suggested Fix

The root issue stems from the utility style string parameters configured on the outermost card container wrappers within src/pages/Signup/Signup.tsx and src/pages/Login/Login.tsx.

###Screenshot
Image

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions