fix(LayoutShell): adjust layout styles for better responsiveness and overflow handling

Author: DrizzleTime

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"

web/src/pages/ProcessorsPage.tsx

@@ -554,23 +554,23 @@ 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}>
               <Button size="small" onClick={loadList} loading={loadingList}>{t('Refresh')}</Button>
               <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}

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 />}