update: more alignment fixes.

src/lib/layout/activity.svelte

@@ -11,7 +11,6 @@
     export let offset = 0;
     export let logs: Models.LogList;
     export let insideSideSheet = false;
-    export let databasesMainScreen = false;
     export let expanded = false;
     export let useCreateLinkForPagination = true;
 
@@ -24,7 +23,7 @@
     ];
 </script>
 
-<Container {insideSideSheet} {databasesMainScreen} expanded={expanded && !insideSideSheet}>
+<Container {insideSideSheet} expanded={expanded && !insideSideSheet}>
     {#if logs.total}
         <div>
             <Table.Root {columns} let:root>

src/lib/layout/container.svelte

@@ -7,7 +7,6 @@
         expanded = false,
         overlapCover = false,
         insideSideSheet = false,
-        databasesMainScreen = false,
         expandHeightButton = false,
         size = null,
         children,
@@ -16,7 +15,6 @@
         expanded?: boolean;
         overlapCover?: boolean;
         insideSideSheet?: boolean;
-        databasesMainScreen?: boolean;
         expandHeightButton?: boolean;
         children?: Snippet;
         size?: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | null;
@@ -35,7 +33,6 @@
         class:expanded
         class:insideSideSheet
         class:expandHeightButton
-        class:databasesMainScreen
         class="console-container">
         <Layout.Stack gap="l">
             {@render children?.()}
@@ -48,7 +45,8 @@
         z-index: 1;
         margin-block-start: -3.5rem;
     }
-    :global(.console-container) {
+
+    .console-container {
         margin-block: var(--base-32);
 
         &.insideSideSheet {
@@ -90,21 +88,6 @@
             }
         }
 
-        &.databasesMainScreen {
-            @media (min-width: 360px) {
-                margin-inline: 1rem;
-            }
-
-            @media (min-width: 1024px) {
-                margin-inline: auto;
-                max-width: 1000px;
-            }
-
-            @media (min-width: 1440px) {
-                max-width: 1200px;
-            }
-        }
-
         @media (min-width: 360px) {
             margin-inline: 1rem;
         }

src/lib/layout/cover.svelte

@@ -124,7 +124,7 @@
         }
 
         &.adjustForSpreadsheet {
-            padding-left: 2.5px;
+            padding-left: 2px;
         }
 
         &.databasesMainScreen {

src/lib/layout/shell.svelte

@@ -305,9 +305,17 @@
             }
         }
 
-        @media (min-width: 1024px) {
-            :global(.console-container) {
-                padding-left: 45px; /* 255px - 210px */
+        :global(.console-container) {
+            @media (min-width: 1024px) {
+                padding-inline-start: var(--base-32, 32px);
+            }
+
+            @media (min-width: 1085px) {
+                padding-inline-start: calc(var(--base-32, 32px) - 0.5rem);
+            }
+
+            @media (min-width: 1280px) {
+                padding-inline-start: calc(var(--base-32, 32px) - 0.75rem);
             }
         }
     }

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

@@ -6,5 +6,5 @@
 </script>
 
 <div class="databases-spreadsheet">
-    <Activity {...data} databasesMainScreen />
+    <Activity {...data} />
 </div>

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

@@ -10,7 +10,7 @@
 </script>
 
 <div class="databases-spreadsheet">
-    <Container databasesMainScreen>
+    <Container>
         {#if $table}
             <UpdateStatus />
             <UpdateName />

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

@@ -11,7 +11,7 @@
 </script>
 
 <div class="databases-spreadsheet">
-    <Container databasesMainScreen>
+    <Container>
         <Usage
             path={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/table-${page.params.table}/usage`}
             {total}