From 67f5c794e193b6b4b2601fcba20a3dc453aa125a Mon Sep 17 00:00:00 2001
From: gitlawr <lawrleegle@gmail.com>
Date: Mon, 18 May 2026 12:18:00 +0800
Subject: [PATCH] fix(login): keep 360px design width with max-width: 100% cap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switching ``Buttons`` to ``width: 100%`` (in c32ad712) had a
side-effect — with ``FormWrapper`` sized to ``max-content``, a
100% child without LocalUserForm alongside it lets the card
collapse to the button's intrinsic text width. Per PR #1097 review,
go back to the 360px design width and rely on ``max-width: 100%``
to keep it from overflowing tighter parents (the enterprise cover
layout's 272px inner especially).

Apply the same shape to LocalUserForm — its hardcoded 360px alone
would still overflow on the cover layout — so the two surfaces
stay in lockstep when switching between SSO and password modes.

(Pre-commit hook still crashes on the ``context.getDeclaredVariables``
bug in main; unrelated.)
---
 src/pages/login/components/local-user-form.tsx |  5 ++++-
 src/pages/login/components/login-form.tsx      | 10 ++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/pages/login/components/local-user-form.tsx b/src/pages/login/components/local-user-form.tsx
index 13b27313..e1f72690 100644
--- a/src/pages/login/components/local-user-form.tsx
+++ b/src/pages/login/components/local-user-form.tsx
@@ -75,7 +75,10 @@ const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
   return (
     <Form
       form={form}
-      style={{ width: '360px', margin: '0 auto' }}
+      // Same shape Buttons uses: 360px design width, capped at the
+      // parent's inner width so the form doesn't overflow on the
+      // enterprise cover layout (272px inner).
+      style={{ width: '360px', maxWidth: '100%', margin: '0 auto' }}
       onFinish={handleLogin}
     >
       <Form.Item
diff --git a/src/pages/login/components/login-form.tsx b/src/pages/login/components/login-form.tsx
index e803b975..e698d924 100644
--- a/src/pages/login/components/login-form.tsx
+++ b/src/pages/login/components/login-form.tsx
@@ -30,10 +30,12 @@ const Buttons = styled.div`
   justify-content: flex-start;
   align-items: stretch;
   gap: 24px;
-  // Stretch to the parent's inner width — a hardcoded 360px overflowed
-  // the right edge of the login card on the cover layout (272px inner)
-  // and ran tight against the edge on the wide layout (320px inner).
-  width: 100%;
+  // Match LocalUserForm's 360px on roomy layouts so switching between
+  // SSO and password doesn't resize the card, but cap at the parent's
+  // inner width so the column doesn't overflow when the parent is
+  // tighter (e.g. the enterprise login's cover variant: 272px inner).
+  width: 360px;
+  max-width: 100%;
   margin-top: 52px;
 `;