From c5d44aa4a7ccaf232caea8a01229e86cd7f7699c Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Sun, 13 Jul 2025 18:36:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20adjust=20layout=20styles=20for=20better?=
 =?UTF-8?q?=20responsiveness=20in=20AuthLayout=20and=E2=80=A6=20(#7159)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: adjust layout styles for better responsiveness in AuthLayout and CustomThemeProvider

* refactor(AuthLayout): enhance layout styling
---
 .../plugin-auth/src/client/pages/AuthLayout.tsx  | 16 ++++++++++++++--
 .../plugin-theme-editor/src/client/index.tsx     |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/plugins/@nocobase/plugin-auth/src/client/pages/AuthLayout.tsx b/packages/plugins/@nocobase/plugin-auth/src/client/pages/AuthLayout.tsx
index cfefc3dab11..b630bebb41f 100644
--- a/packages/plugins/@nocobase/plugin-auth/src/client/pages/AuthLayout.tsx
+++ b/packages/plugins/@nocobase/plugin-auth/src/client/pages/AuthLayout.tsx
@@ -8,7 +8,15 @@
  */
 
 import { css } from '@emotion/css';
-import { PoweredBy, ReadPretty, SwitchLanguage, useAPIClient, useRequest, useSystemSettings } from '@nocobase/client';
+import {
+  PoweredBy,
+  ReadPretty,
+  SwitchLanguage,
+  useAPIClient,
+  useRequest,
+  useSystemSettings,
+  useToken,
+} from '@nocobase/client';
 import { Spin } from 'antd';
 import React, { FC } from 'react';
 import { Outlet } from 'react-router-dom';
@@ -46,12 +54,14 @@ export const AuthenticatorsContextProvider: FC<{ children: React.ReactNode }> =
 
 export function AuthLayout() {
   const { data } = useSystemSettings() || {};
+  const { token } = useToken();
   return (
     <div
       style={{
         maxWidth: 320,
         margin: '0 auto',
         paddingTop: '20vh',
+        paddingBottom: '20vh',
       }}
     >
       <div style={{ position: 'fixed', top: '2em', right: '2em' }}>
@@ -66,10 +76,12 @@ export function AuthLayout() {
       <div
         className={css`
           position: absolute;
-          bottom: 24px;
+          bottom: 0;
           width: 100%;
           left: 0;
           text-align: center;
+          padding-bottom: 24px;
+          background-color: ${token.colorBgContainer};
         `}
       >
         <PoweredBy />
diff --git a/packages/plugins/@nocobase/plugin-theme-editor/src/client/index.tsx b/packages/plugins/@nocobase/plugin-theme-editor/src/client/index.tsx
index c29b50d8013..58bfd543872 100644
--- a/packages/plugins/@nocobase/plugin-theme-editor/src/client/index.tsx
+++ b/packages/plugins/@nocobase/plugin-theme-editor/src/client/index.tsx
@@ -56,7 +56,7 @@ const CustomThemeProvider = React.memo((props) => {
   }, [open]);
 
   const editor = (
-    <div style={{ display: 'flex', overflow: 'hidden', height: '100%' }}>
+    <div style={{ display: 'flex', overflow: 'auto', height: '100%' }}>
       <div style={contentStyle}>{props.children}</div>
       {open ? (
         <div className={styles.editor}>