fix: edit row layout scroll;

fix: remove excess margin top;
fix: container buttons on mobile.
fix: empty sheet fade cover area.

src/lib/layout/container.svelte

@@ -44,6 +44,10 @@
 
             &:first-child {
                 margin-inline: 4rem;
+
+                @media (max-width: 768px) {
+                    margin-inline: 1rem;
+                }
             }
 
             &.slotSpacing {

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte

@@ -321,6 +321,7 @@
 </SideSheet>
 
 <SideSheet
+    spaced
     title={$databaseRowSheetOptions.title}
     bind:show={$databaseRowSheetOptions.show}
     submit={{

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte

@@ -6,7 +6,6 @@
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteTables } from '$lib/stores/roles';
     import { table } from './store';
-    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
 
     const databaseId = $derived(page.params.database);
 
@@ -56,27 +55,25 @@
     );
 </script>
 
-<div style:margin-top={$isTabletViewport && !$isSmallViewport ? '48px' : 0}>
-    <Cover expanded>
-        <svelte:fragment slot="header">
-            <CoverTitle
-                href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`}>
-                {$table?.name}
-            </CoverTitle>
-            {#key $table?.$id}
-                <Id value={$table?.$id}>{$table?.$id}</Id>
-            {/key}
-        </svelte:fragment>
+<Cover expanded>
+    <svelte:fragment slot="header">
+        <CoverTitle
+            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`}>
+            {$table?.name}
+        </CoverTitle>
+        {#key $table?.$id}
+            <Id value={$table?.$id}>{$table?.$id}</Id>
+        {/key}
+    </svelte:fragment>
 
-        <Tabs>
-            {#each tabs as tab}
-                <Tab
-                    href={tab.href}
-                    selected={isTabSelected(tab, page.url.pathname, path, tabs)}
-                    event={tab.event}>
-                    {tab.title}
-                </Tab>
-            {/each}
-        </Tabs>
-    </Cover>
-</div>
+    <Tabs>
+        {#each tabs as tab}
+            <Tab
+                href={tab.href}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
+                event={tab.event}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte

@@ -281,6 +281,7 @@
     }
 
     .spreadsheet-fade-bottom {
+        top: 29%;
         bottom: 0;
         width: 100%;
         height: 70vh;

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte

@@ -42,7 +42,7 @@
                     await submit?.onClick();
                     show = false;
                 }}>
-                <Layout.Stack gap="xl">
+                <Layout.Stack gap="xl" class="sheet-content">
                     {@render children?.()}
                 </Layout.Stack>
 
@@ -79,6 +79,11 @@
                 margin-top: 6rem;
             }
         }
+
+        & :global(.sheet-content) {
+            overflow-y: auto;
+            padding-bottom: 5rem;
+        }
     }
 
     .sheet-footer {
@@ -86,6 +91,7 @@
         right: 0;
         bottom: 0;
         position: absolute;
+        background: var(--bgcolor-neutral-primary);
 
         & .sheet-footer-actions {
             padding-inline: var(--space-8);

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte

@@ -395,12 +395,12 @@
             }
 
             if (action === 'duplicate-row') {
-                showRecordsCreateSheet.show = true;
                 showRecordsCreateSheet.row = row;
+                showRecordsCreateSheet.show = true;
             }
 
             if (action === 'copy-json') {
-                const stringified = JSON.stringify(document, null, 2);
+                const stringified = JSON.stringify(row, null, 2);
                 try {
                     await copy(stringified);
                     addNotification({
@@ -537,7 +537,7 @@
                                     type="row"
                                     column={$columns.find((col) => col.key === columnId)}
                                     onSelect={(option) =>
-                                        onSelectSheetOption(option, 'row', null, row)}>
+                                        onSelectSheetOption(option, null, 'row', row)}>
                                     {#snippet children(toggle)}
                                         <Button.Button
                                             icon