endery/voxblog
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style: update layout to use full viewport width and fix overflow issues

Browse Source
This commit is contained in:
Ender 2025-10-24 22:58:43 +02:00
parent 8686744c7e
commit 706c0e4ae4
6 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/admin/src/App.css
View File

@ -1,8 +1,8 @@
#root { #root {
max-width: 1280px; min-height: 100dvh;
margin: 0 auto; margin: 0;
padding: 2rem; padding: 0;
text-align: center; text-align: initial;
} }
.logo { .logo {

8
apps/admin/src/App.tsx
View File

@ -43,9 +43,9 @@ function App() {
}; };
return ( return (
<div className="app"> <>
{authenticated ? ( {authenticated ? (
<Box sx={{ display: 'grid', gridTemplateRows: 'auto 1fr', minHeight: '100dvh' }}> <Box sx={{ display: 'grid', gridTemplateRows: 'auto 1fr', minHeight: '100dvh', width: '100%' }}>
<AdminTopBar <AdminTopBar
userName={undefined} userName={undefined}
onGoPosts={() => setSelectedPostId(null)} onGoPosts={() => setSelectedPostId(null)}
@ -53,7 +53,7 @@ function App() {
onSettings={undefined} onSettings={undefined}
onLogout={handleLogout} onLogout={handleLogout}
/> />
<Box sx={{ minHeight: 0, overflow: 'hidden' }}> <Box sx={{ minHeight: 0, overflow: 'hidden', width: '100%' }}>
{selectedPostId ? ( {selectedPostId ? (
<EditorShell <EditorShell
onLogout={handleLogout} onLogout={handleLogout}
@ -77,7 +77,7 @@ function App() {
setAuthenticated(true); setAuthenticated(true);
}} /> }} />
)} )}
</div> </>
); );
} }

2
apps/admin/src/components/EditorShell.tsx
View File

@ -49,7 +49,7 @@ export default function EditorShell({ onLogout: _onLogout, initialPostId, onBack
// No inline post switching here; selection happens on Posts page // No inline post switching here; selection happens on Posts page
return ( return (
<Box sx={{ minHeight: '100dvh', display: 'flex', flexDirection: 'column', p: { xs: 2, md: 3 }, overflow: 'hidden' }}> <Box sx={{ minHeight: '100dvh', width: '100%', display: 'flex', flexDirection: 'column', p: { xs: 2, md: 3 }, overflow: 'hidden' }}>
<Snackbar <Snackbar
open={!!toast?.open} open={!!toast?.open}
autoHideDuration={2500} autoHideDuration={2500}

13
apps/admin/src/components/PostsList.tsx
View File

@ -87,16 +87,16 @@ export default function PostsList({ onSelect, onNew }: { onSelect: (id: string)
], [onSelect]); ], [onSelect]);
return ( return (
<Box> <Box sx={{ height: '100%', width: '100%', minHeight: 0, display: 'grid', gridTemplateRows: 'auto 1fr', gap: 2, p: { xs: 2, md: 3 } }}>
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 2 }}> <Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography variant="h5">Posts</Typography> <Typography variant="h5">Posts</Typography>
<Stack direction="row" spacing={1}> <Stack direction="row" spacing={1}>
<TextField size="small" placeholder="Search…" value={query} onChange={e => setQuery(e.target.value)} /> <TextField size="small" placeholder="Search…" value={query} onChange={e => setQuery(e.target.value)} />
<Button variant="contained" onClick={onNew}>New Post</Button> <Button variant="contained" onClick={onNew}>New Post</Button>
</Stack> </Stack>
</Stack> </Stack>
{error && <Typography color="error" sx={{ mb: 1 }}>{error}</Typography>} {error && <Typography color="error">{error}</Typography>}
<div style={{ width: '100%' }}> <Box sx={{ minHeight: 0, height: '100%' }}>
<DataGrid<PostSummary> <DataGrid<PostSummary>
rows={rows} rows={rows}
columns={columns} columns={columns}
@ -110,9 +110,10 @@ export default function PostsList({ onSelect, onNew }: { onSelect: (id: string)
onSortModelChange={setSortModel} onSortModelChange={setSortModel}
disableRowSelectionOnClick disableRowSelectionOnClick
pageSizeOptions={[10, 20, 50, 100]} pageSizeOptions={[10, 20, 50, 100]}
autoHeight autoHeight={false}
sx={{ height: '100%' }}
/> />
</div> </Box>
</Box> </Box>
); );
} }

10
apps/admin/src/components/layout/StepNavigation.tsx
View File

@ -12,7 +12,15 @@ export default function StepNavigation({
right?: React.ReactNode; right?: React.ReactNode;
}) { }) {
return ( return (
<Box sx={{ bgcolor: 'background.paper', py: 1, borderTop: '1px solid', borderColor: 'divider' }}> <Box sx={{
bgcolor: 'background.paper',
py: 1,
borderTop: '1px solid',
borderColor: 'divider',
position: 'sticky',
bottom: 0,
zIndex: (theme) => theme.zIndex.appBar,
}}>
<Stack direction="row" spacing={1} justifyContent="space-between"> <Stack direction="row" spacing={1} justifyContent="space-between">
<Button disabled={!!disableBack} onClick={onBack}>Back</Button> <Button disabled={!!disableBack} onClick={onBack}>Back</Button>
<Stack direction="row" spacing={1} alignItems="center"> <Stack direction="row" spacing={1} alignItems="center">

5
apps/admin/src/index.css
View File

@ -24,10 +24,11 @@ a:hover {
body { body {
margin: 0; margin: 0;
display: flex; padding: 0;
place-items: center;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
width: 100%;
overflow-x: hidden;
} }
h1 { h1 {