From e6402661d6640620436e1dfe82c27ac775486622 Mon Sep 17 00:00:00 2001
From: shiyu <im@shiyu.dev>
Date: Mon, 9 Mar 2026 17:26:24 +0800
Subject: [PATCH] fix(LayoutShell): adjust layout styles for better
 responsiveness and overflow handling

---
 web/src/pages/PluginsPage.tsx    |  2 +-
 web/src/pages/ProcessorsPage.tsx | 10 +++++-----
 web/src/router/LayoutShell.tsx   | 10 ++++++----
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/PluginsPage.tsx b/web/src/pages/PluginsPage.tsx
index d6411f8..137ce37 100644
--- a/web/src/pages/PluginsPage.tsx
+++ b/web/src/pages/PluginsPage.tsx
@@ -521,7 +521,7 @@ const PluginsPage = memo(function PluginsPage() {
   };
 
   return (
-    <div style={{ height: 'calc(100vh - 88px)', display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden' }}>
+    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden' }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
         <Upload
           accept=".foxpkg"
diff --git a/web/src/pages/ProcessorsPage.tsx b/web/src/pages/ProcessorsPage.tsx
index a7c9091..c5470a1 100644
--- a/web/src/pages/ProcessorsPage.tsx
+++ b/web/src/pages/ProcessorsPage.tsx
@@ -554,9 +554,9 @@ const ProcessorsPage = memo(function ProcessorsPage() {
   return (
     <>
       {contextHolder}
-      <Flex gap={16} style={{ height: 'calc(100vh - 88px)' }}>
+      <Flex gap={16} style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
         <Card
-          style={{ flex: '0 0 320px', minWidth: 280, display: 'flex', flexDirection: 'column' }}
+          style={{ flex: '0 0 320px', minWidth: 280, minHeight: 0, display: 'flex', flexDirection: 'column' }}
           title={t('Processor List')}
           extra={
             <Space size={8}>
@@ -564,13 +564,13 @@ const ProcessorsPage = memo(function ProcessorsPage() {
               <Button size="small" onClick={handleReloadProcessors} loading={reloading}>{t('Reload')}</Button>
             </Space>
           }
-          styles={{ body: { padding: 0, flex: 1, display: 'flex' } }}
+          styles={{ body: { padding: 0, flex: 1, minHeight: 0, display: 'flex' } }}
         >
           {renderProcessorList()}
         </Card>
 
         <Card
-          style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}
+          style={{ flex: 1, minWidth: 0, minHeight: 0, display: 'flex', flexDirection: 'column' }}
           title={selectedProcessorMeta ? `${selectedProcessorMeta.name} (${selectedProcessorMeta.type})` : t('Select a processor')}
           extra={
             <Space size={8}>
@@ -582,7 +582,7 @@ const ProcessorsPage = memo(function ProcessorsPage() {
               </Button>
             </Space>
           }
-          styles={{ body: { padding: 0, flex: 1, display: 'flex', flexDirection: 'column' } }}
+          styles={{ body: { padding: 0, flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' } }}
         >
           <Tabs
             activeKey={activeTab}
diff --git a/web/src/router/LayoutShell.tsx b/web/src/router/LayoutShell.tsx
index b7fb7ab..d380b05 100644
--- a/web/src/router/LayoutShell.tsx
+++ b/web/src/router/LayoutShell.tsx
@@ -51,7 +51,7 @@ const ShellBody = memo(function ShellBody() {
   };
 
   return (
-    <Layout style={{ minHeight: '100dvh', background: 'var(--ant-color-bg-layout)' }}>
+    <Layout style={{ height: '100dvh', overflow: 'hidden', background: 'var(--ant-color-bg-layout)' }}>
       {!isMobile && (
         <SideNav
           collapsed={collapsed}
@@ -85,7 +85,7 @@ const ShellBody = memo(function ShellBody() {
         />
       )}
 
-      <Layout style={{ background: 'var(--ant-color-bg-layout)', minWidth: 0 }}>
+      <Layout style={{ background: 'var(--ant-color-bg-layout)', minWidth: 0, minHeight: 0, overflow: 'hidden' }}>
         <TopHeader
           collapsed={collapsed}
           onToggle={handleToggleNav}
@@ -94,15 +94,17 @@ const ShellBody = memo(function ShellBody() {
         />
         <Layout.Content
           style={{
+            flex: 1,
             padding: isMobile ? 12 : 16,
             background: 'var(--ant-color-bg-layout)',
             display: 'flex',
             flexDirection: 'column',
             minHeight: 0,
+            overflow: 'hidden',
           }}
         >
-          <div style={{ flex: 1, minHeight: 0, background: 'var(--ant-color-bg-layout)' }}>
-            <Flex vertical gap={16} style={{ minHeight: '100%', height: '100%' }}>
+          <div style={{ flex: 1, minHeight: 0, background: 'var(--ant-color-bg-layout)', overflow: 'hidden' }}>
+            <Flex vertical style={{ minHeight: 0, height: '100%' }}>
               {navKey === 'adapters' && <AdaptersPage />}
               {navKey === 'files' && <FileExplorerPage />}
               {navKey === 'share' && <SharePage />}