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

apps/admin/src/App.css

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

apps/admin/src/App.tsx

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

apps/admin/src/components/EditorShell.tsx

@@ -49,7 +49,7 @@ export default function EditorShell({ onLogout: _onLogout, initialPostId, onBack
   // No inline post switching here; selection happens on Posts page
 
   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
         open={!!toast?.open}
         autoHideDuration={2500}

apps/admin/src/components/PostsList.tsx

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

apps/admin/src/components/layout/StepNavigation.tsx

@@ -12,7 +12,15 @@ export default function StepNavigation({
   right?: React.ReactNode;
 }) {
   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">
         <Button disabled={!!disableBack} onClick={onBack}>Back</Button>
         <Stack direction="row" spacing={1} alignItems="center">

apps/admin/src/index.css

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