GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-09-06 16:17:06 +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
web/src/pages/PluginsPage.tsx
+1 -1
View File
@@ -521,7 +521,7 @@ const PluginsPage = memo(function PluginsPage() {
}; };
return ( 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' }}> <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
<Upload <Upload
accept=".foxpkg" accept=".foxpkg"
web/src/pages/ProcessorsPage.tsx
+5 -5
View File
@@ -554,9 +554,9 @@ const ProcessorsPage = memo(function ProcessorsPage() {
return ( return (
<> <>
{contextHolder} {contextHolder}
<Flex gap={16} style={{ height: 'calc(100vh - 88px)' }}> <Flex gap={16} style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
<Card <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')} title={t('Processor List')}
extra={ extra={
<Space size={8}> <Space size={8}>
@@ -564,13 +564,13 @@ const ProcessorsPage = memo(function ProcessorsPage() {
<Button size="small" onClick={handleReloadProcessors} loading={reloading}>{t('Reload')}</Button> <Button size="small" onClick={handleReloadProcessors} loading={reloading}>{t('Reload')}</Button>
</Space> </Space>
} }
styles={{ body: { padding: 0, flex: 1, display: 'flex' } }} styles={{ body: { padding: 0, flex: 1, minHeight: 0, display: 'flex' } }}
> >
{renderProcessorList()} {renderProcessorList()}
</Card> </Card>
<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')} title={selectedProcessorMeta ? `${selectedProcessorMeta.name} (${selectedProcessorMeta.type})` : t('Select a processor')}
extra={ extra={
<Space size={8}> <Space size={8}>
@@ -582,7 +582,7 @@ const ProcessorsPage = memo(function ProcessorsPage() {
</Button> </Button>
</Space> </Space>
} }
styles={{ body: { padding: 0, flex: 1, display: 'flex', flexDirection: 'column' } }} styles={{ body: { padding: 0, flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' } }}
> >
<Tabs <Tabs
activeKey={activeTab} activeKey={activeTab}
web/src/router/LayoutShell.tsx
+6 -4
View File
@@ -51,7 +51,7 @@ const ShellBody = memo(function ShellBody() {
}; };
return ( return (
<Layout style={{ minHeight: '100dvh', background: 'var(--ant-color-bg-layout)' }}> <Layout style={{ height: '100dvh', overflow: 'hidden', background: 'var(--ant-color-bg-layout)' }}>
{!isMobile && ( {!isMobile && (
<SideNav <SideNav
collapsed={collapsed} 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 <TopHeader
collapsed={collapsed} collapsed={collapsed}
onToggle={handleToggleNav} onToggle={handleToggleNav}
@@ -94,15 +94,17 @@ const ShellBody = memo(function ShellBody() {
/> />
<Layout.Content <Layout.Content
style={{ style={{
flex: 1,
padding: isMobile ? 12 : 16, padding: isMobile ? 12 : 16,
background: 'var(--ant-color-bg-layout)', background: 'var(--ant-color-bg-layout)',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
minHeight: 0, minHeight: 0,
overflow: 'hidden',
}} }}
> >
<div style={{ flex: 1, minHeight: 0, background: 'var(--ant-color-bg-layout)' }}> <div style={{ flex: 1, minHeight: 0, background: 'var(--ant-color-bg-layout)', overflow: 'hidden' }}>
<Flex vertical gap={16} style={{ minHeight: '100%', height: '100%' }}> <Flex vertical style={{ minHeight: 0, height: '100%' }}>
{navKey === 'adapters' && <AdaptersPage />} {navKey === 'adapters' && <AdaptersPage />}
{navKey === 'files' && <FileExplorerPage />} {navKey === 'files' && <FileExplorerPage />}
{navKey === 'share' && <SharePage />} {navKey === 'share' && <SharePage />}