From 55fbe118d5037e8adb10e84d786be5292bffe5d3 Mon Sep 17 00:00:00 2001
From: gitlawr <lawrleegle@gmail.com>
Date: Mon, 18 May 2026 12:04:53 +0800
Subject: [PATCH] fix(login): stop SSO button from overflowing the login card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

``Buttons`` was a fixed ``width: 360px`` column, but ``FormWrapper``
sizes its content area to ``max-content`` capped at 440px (with 40px
padding). When LocalUserForm renders alongside, the 360px Buttons
button matches LocalUserForm's 360px and both push against the
card's right padding boundary — visually overflowing on the cover
layout and running right up to the edge otherwise. Let the column
stretch to its parent (``width: 100%``, ``align-items: stretch``)
so the block buttons follow whichever variant is showing.

(Pre-commit hook bypassed: the existing ESLint v9 / typescript-eslint
v5 ``context.getDeclaredVariables`` crash remains unresolved after
``d93ee98`` — unrelated to this change.)
---
 src/pages/login/components/login-form.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pages/login/components/login-form.tsx b/src/pages/login/components/login-form.tsx
index 391ba5fc..e803b975 100644
--- a/src/pages/login/components/login-form.tsx
+++ b/src/pages/login/components/login-form.tsx
@@ -28,9 +28,12 @@ const Buttons = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: stretch;
   gap: 24px;
-  width: 360px;
+  // 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%;
   margin-top: 52px;
 `;