Fix: alignments, remove total table stats

src/lib/layout/container.svelte

@@ -1,34 +1,56 @@
 <script lang="ts">
     import { Layout } from '@appwrite.io/pink-svelte';
-
-    // TODO: needs better props
-
-    export let expanded = false;
-    export let slotSpacing = false;
-    export let overlapCover = false;
-    export let paddingInlineEnd = true;
-    export let insideSideSheet = false;
-    export let databasesScreen = false;
-    export let expandHeightButton = false;
-    export let size: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' = null;
-
-    $: style = size
-        ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
-        : '';
+    import type { Snippet } from 'svelte';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let {
+        expanded = false,
+        slotSpacing = false,
+        overlapCover = false,
+        paddingInlineEnd = true,
+        paddingInlineEndDouble = false,
+        insideSideSheet = false,
+        databasesScreen = false,
+        databasesMainScreen = false,
+        expandHeightButton = false,
+        size = null,
+        children,
+        ...restProps
+    }: {
+        expanded?: boolean;
+        slotSpacing?: boolean;
+        overlapCover?: boolean;
+        paddingInlineEnd?: boolean;
+        paddingInlineEndDouble?: boolean;
+        insideSideSheet?: boolean;
+        databasesScreen?: boolean;
+        databasesMainScreen?: boolean;
+        expandHeightButton?: boolean;
+        children?: Snippet;
+        size?: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | null;
+    } & HTMLAttributes<HTMLDivElement> = $props();
+
+    const style = $derived(
+        size
+            ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
+            : ''
+    );
 </script>
 
-<div style:container-type="inline-size" class:overlap-cover={overlapCover} {...$$restProps}>
+<div style:container-type="inline-size" class:overlap-cover={overlapCover} {...restProps}>
     <div
         {style}
         class:expanded
         class:slotSpacing
-        class:databasesScreen
         class:insideSideSheet
+        class:databasesScreen
         class:expandHeightButton
+        class:databasesMainScreen
         class="console-container"
+        class:paddingInlineEndDouble
         class:paddingInlineEnd={!paddingInlineEnd}>
         <Layout.Stack gap="l">
-            <slot />
+            {@render children?.()}
         </Layout.Stack>
     </div>
 </div>
@@ -90,6 +112,12 @@
             }
         }
 
+        &.paddingInlineEndDouble {
+            @media (min-width: 1024px) {
+                padding-inline-end: calc(2 * 2.75rem) !important;
+            }
+        }
+
         &.databasesScreen {
             @media (min-width: 1440px) {
                 min-width: 1070px;
@@ -102,6 +130,12 @@
             }
         }
 
+        &.databasesMainScreen {
+            @media (min-width: 1440px) {
+                max-width: 1200px;
+            }
+        }
+
         @media (min-width: 360px) {
             margin-inline: 1rem;
         }

src/lib/layout/cover.svelte

@@ -7,6 +7,7 @@
     export let expanded: boolean = false;
     export let animate: boolean = false;
     export let collapsed: boolean = false;
+    export let databasesMainScreen: boolean = false;
 
     let isAnimating = false;
     let animationTimeout: ReturnType<typeof setTimeout>;
@@ -43,6 +44,7 @@
         class="cover-container"
         {style}
         class:expanded
+        class:databasesMainScreen
         class:collapsed={animate && collapsed}
         class:animating={isAnimating}>
         <Layout.Stack direction="row" alignItems="baseline">
@@ -119,6 +121,12 @@
         &.animating {
             transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
         }
+
+        &.databasesMainScreen {
+            @media (min-width: 1440px) {
+                max-width: 1200px;
+            }
+        }
     }
 
     .expanded-slot {

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

@@ -18,7 +18,7 @@
     const databaseId = page.params.database;
 </script>
 
-<Container paddingInlineEnd={false}>
+<Container databasesMainScreen>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
             <SearchQuery placeholder="Search by name or ID" />

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

@@ -177,7 +177,7 @@
     });
 </script>
 
-<Container size="xxl">
+<Container size="xxl" databasesMainScreen>
     <div class="u-flex u-gap-32 u-flex-vertical-mobile">
         {#if !isDisabled}
             <div class="u-flex-vertical u-gap-16 policies-holder-card">

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

@@ -38,7 +38,7 @@
     ].filter((tab) => !tab.disabled);
 </script>
 
-<Cover expanded>
+<Cover databasesMainScreen>
     <svelte:fragment slot="header">
         <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/databases`}>
             {$database.name}

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

@@ -61,7 +61,7 @@
 </script>
 
 {#if $database}
-    <Container>
+    <Container databasesMainScreen>
         <CardGrid>
             <svelte:fragment slot="title">{$database.name}</svelte:fragment>
             <svelte:fragment slot="aside">

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

@@ -1,41 +1,24 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import { Container, Usage, UsageMultiple } from '$lib/layout';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Container, UsageMultiple } from '$lib/layout';
 
     export let data;
 
-    $: total = data.tablesTotal;
-    $: count = data.tables;
-
     $: reads = data.databaseReads;
     $: readsTotal = data.databaseReadsTotal;
 
     $: writes = data.databaseWrites;
     $: writesTotal = data.databaseWritesTotal;
 </script>
 
-<Container>
-    <Layout.Stack gap="l">
-        <Usage
-            path={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/usage`}
-            {total}
-            {count}
-            countMetadata={{
-                legend: 'Tables',
-                title: 'Total tables'
-            }} />
-
-        <UsageMultiple
-            title="Reads and writes"
-            showHeader={false}
-            total={[readsTotal, writesTotal]}
-            count={[reads, writes]}
-            legendNumberFormat="abbreviate"
-            legendData={[
-                { name: 'Reads', value: readsTotal },
-                { name: 'Writes', value: writesTotal }
-            ]} />
-    </Layout.Stack>
+<Container databasesMainScreen>
+    <UsageMultiple
+        title="Reads and writes"
+        showHeader={false}
+        total={[readsTotal, writesTotal]}
+        count={[reads, writes]}
+        legendNumberFormat="abbreviate"
+        legendData={[
+            { name: 'Reads', value: readsTotal },
+            { name: 'Writes', value: writesTotal }
+        ]} />
 </Container>