[Responsive] LoginPage 375px — login card extends edge-to-edge with no horizontal margin

[Ryan-Atkinson87]

Severity: minor

Breakpoint

Mobile — 375px viewport width

Steps to reproduce

1. Open the login page at 375px viewport width
2. Observe the login card layout

Expected behaviour

The login card has a small horizontal margin at mobile widths so it does not extend to the very edge of the viewport. Rounded corners and the card shadow should be fully visible.

Actual behaviour

The card uses w-full max-w-sm. At 375px (viewport narrower than max-w-sm = 384px), the card fills the full viewport width. The rounded-lg corners and shadow are visible, but there is no outer horizontal padding — the card meets the viewport edge directly. This looks visually clipped on device.

Fix

Add outer padding on the centering wrapper, visible only at small breakpoints:

<div className="flex h-dvh items-center justify-center bg-gray-50 px-4 sm:px-0">

This adds 16px horizontal padding on xs screens, removing it at sm and above where the card is narrower than the viewport.

Location

orchestrator-ui/src/auth/LoginPage.tsx — outer <div className="flex h-dvh items-center justify-center bg-gray-50">