fix: alignments, remove total table stats.

src/lib/layout/container.svelte

@@ -1,23 +1,40 @@
 <script lang="ts">
     import { Layout } from '@appwrite.io/pink-svelte';
+    import type { Snippet } from 'svelte';
 
-    // TODO: needs better props
+    let {
+        expanded = false,
+        slotSpacing = false,
+        overlapCover = false,
+        paddingInlineEnd = true,
+        paddingInlineEndDouble = false,
+        insideSideSheet = false,
+        databasesScreen = false,
+        expandHeightButton = false,
+        size = null,
+        children,
+        ...restProps
+    }: {
+        expanded?: boolean;
+        slotSpacing?: boolean;
+        overlapCover?: boolean;
+        paddingInlineEnd?: boolean;
+        paddingInlineEndDouble?: boolean;
+        insideSideSheet?: boolean;
+        databasesScreen?: boolean;
+        expandHeightButton?: boolean;
+        children: Snippet;
+        size?: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | null;
+    } = $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}))`
-        : '';
+    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
@@ -26,9 +43,10 @@
         class:insideSideSheet
         class:expandHeightButton
         class="console-container"
+        class:paddingInlineEndDouble
         class:paddingInlineEnd={!paddingInlineEnd}>
         <Layout.Stack gap="l">
-            <slot />
+            {@render children?.()}
         </Layout.Stack>
     </div>
 </div>
@@ -90,6 +108,12 @@
             }
         }
 
+        &.paddingInlineEndDouble {
+            @media (min-width: 1024px) {
+                padding-inline-end: calc(2 * 2.75rem) !important;
+            }
+        }
+
         &.databasesScreen {
             @media (min-width: 1440px) {
                 min-width: 1070px;

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 expanded slotSpacing paddingInlineEndDouble>
     <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" expanded slotSpacing paddingInlineEndDouble>
     <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]/settings/+page.svelte

@@ -61,7 +61,7 @@
 </script>
 
 {#if $database}
-    <Container>
+    <Container expanded slotSpacing paddingInlineEndDouble>
         <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,14 +1,8 @@
 <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;
 
@@ -16,26 +10,15 @@
     $: 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 expanded slotSpacing paddingInlineEndDouble>
+    <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>