GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-05-06 18:22:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
shiyu
2026-03-09 17:26:24 +08:00
parent f4b18fdf35
commit e6402661d6
3 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/PluginsPage.tsx
View File

@@ -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"

10
web/src/pages/ProcessorsPage.tsx
View File

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

10
web/src/router/LayoutShell.tsx
View File

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