From 2566ab91053a13842a090b1123bf72c719241186 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 28 Apr 2026 05:33:11 +0000
Subject: [PATCH] fix: prevent signin page content from overflowing on mobile
 viewports

Replace shrink-0 with min-w-0 on card containers to allow proper
sizing on small screens. Add w-full to inner content containers
for proper mobile width. Fix hard-coded w-[400px] to responsive
w-full md:w-[400px] in webapp-reset-password layout.

Agent-Logs-Url: https://github.com/langgenius/dify/sessions/e361965b-6f86-4c1c-99fc-a55a9c95e5fa

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
---
 web/app/(shareLayout)/webapp-reset-password/layout.tsx | 4 ++--
 web/app/(shareLayout)/webapp-signin/layout.tsx         | 4 ++--
 web/app/account/oauth/authorize/layout.tsx             | 4 ++--
 web/app/reset-password/layout.tsx                      | 4 ++--
 web/app/signin/layout.tsx                              | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/app/(shareLayout)/webapp-reset-password/layout.tsx b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
index 82749c8641..ba27fa5830 100644
--- a/web/app/(shareLayout)/webapp-reset-password/layout.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
@@ -10,7 +10,7 @@ export default function SignInLayout({ children }: any) {
   return (
     <>
       <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
-        <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        <div className={cn('flex w-full min-w-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
           <Header />
           <div className={
             cn(
@@ -20,7 +20,7 @@ export default function SignInLayout({ children }: any) {
             )
           }
           >
-            <div className="flex w-[400px] flex-col">
+            <div className="flex w-full flex-col md:w-[400px]">
               {children}
             </div>
           </div>
diff --git a/web/app/(shareLayout)/webapp-signin/layout.tsx b/web/app/(shareLayout)/webapp-signin/layout.tsx
index 99dd787cec..dd141e20a1 100644
--- a/web/app/(shareLayout)/webapp-signin/layout.tsx
+++ b/web/app/(shareLayout)/webapp-signin/layout.tsx
@@ -14,10 +14,10 @@ export default function SignInLayout({ children }: PropsWithChildren) {
   return (
     <>
       <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
-        <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        <div className={cn('flex w-full min-w-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
           {/* <Header /> */}
           <div className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]')}>
-            <div className="flex justify-center md:w-[440px] lg:w-[600px]">
+            <div className="flex w-full justify-center md:w-[440px] lg:w-[600px]">
               {children}
             </div>
           </div>
diff --git a/web/app/account/oauth/authorize/layout.tsx b/web/app/account/oauth/authorize/layout.tsx
index 850fe9c2b5..88d412e8e6 100644
--- a/web/app/account/oauth/authorize/layout.tsx
+++ b/web/app/account/oauth/authorize/layout.tsx
@@ -31,10 +31,10 @@ export default function SignInLayout({ children }: any) {
   return (
     <>
       <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
-        <div className={cn('flex w-full shrink-0 flex-col items-center rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        <div className={cn('flex w-full min-w-0 flex-col items-center rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
           <Header />
           <div className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]')}>
-            <div className="flex flex-col md:w-[400px]">
+            <div className="flex w-full flex-col md:w-[400px]">
               {isLoggedIn
                 ? (
                     <AppContextProvider>
diff --git a/web/app/reset-password/layout.tsx b/web/app/reset-password/layout.tsx
index e2691a397e..83bc1f73db 100644
--- a/web/app/reset-password/layout.tsx
+++ b/web/app/reset-password/layout.tsx
@@ -10,7 +10,7 @@ export default function SignInLayout({ children }: any) {
   return (
     <>
       <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
-        <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        <div className={cn('flex w-full min-w-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
           <Header />
           <div className={
             cn(
@@ -20,7 +20,7 @@ export default function SignInLayout({ children }: any) {
             )
           }
           >
-            <div className="flex flex-col md:w-[400px]">
+            <div className="flex w-full flex-col md:w-[400px]">
               {children}
             </div>
           </div>
diff --git a/web/app/signin/layout.tsx b/web/app/signin/layout.tsx
index a6537793c8..59053d43da 100644
--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@@ -12,10 +12,10 @@ export default function SignInLayout({ children }: any) {
   return (
     <>
       <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
-        <div className={cn('flex w-full shrink-0 flex-col items-center rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        <div className={cn('flex w-full min-w-0 flex-col items-center rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
           <Header />
           <div className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]')}>
-            <div className="flex flex-col md:w-[400px]">
+            <div className="flex w-full flex-col md:w-[400px]">
               {children}
             </div>
           </div>