update: more layout fixes.

src/lib/layout/container.svelte

@@ -53,6 +53,7 @@
             &.expandHeightButton {
                 margin-inline-end: unset;
                 margin-inline-start: 2.75rem;
+                padding-inline-end: 0.5rem !important;
             }
 
             &:first-child {

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

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
     import {
         ActionMenu,
         Badge,
@@ -116,7 +117,7 @@
         enum: IconViewList
     };
 
-    const emptyCellsLimit = $derived($isSmallViewport ? 16 : 18);
+    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 17);
     const emptyCellsCount = $derived(
         updatedColumnsForSheet.length >= emptyCellsLimit
             ? 0
@@ -162,6 +163,25 @@
     });
 </script>
 
+<Container
+    expanded
+    expandHeightButton={$isSmallViewport}
+    style="background: var(--bgcolor-neutral-primary)">
+    <Layout.Stack direction="row" justifyContent="flex-end">
+        {#if updatedColumnsForSheet}
+            <Button
+                size="s"
+                secondary
+                disabled={$isCsvImportInProgress}
+                on:click={() => ($showCreateAttributeSheet.show = true)}
+                event="create_attribute">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create column
+            </Button>
+        {/if}
+    </Layout.Stack>
+</Container>
+
 <div class="databases-spreadsheet">
     <SpreadsheetContainer bind:this={spreadsheetContainer}>
         <Spreadsheet.Root
@@ -255,7 +275,9 @@
                             </Layout.Stack>
                             {@const minMaxSize = getMinMaxSizeForColumn(column)}
                             {#if minMaxSize}
-                                <Badge size="xs" content={minMaxSize} variant="secondary" />
+                                <Typography.Caption variant="400">
+                                    {minMaxSize}
+                                </Typography.Caption>
                             {/if}
                         </Layout.Stack>
                     </Spreadsheet.Cell>

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

@@ -26,13 +26,11 @@
         IconPlus,
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
-    import { type ComponentProps, onDestroy, onMount, tick } from 'svelte';
+    import { type ComponentProps, onDestroy, tick } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import EmptySheet from '../layout/emptySheet.svelte';
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
-    import { page } from '$app/state';
     import SideSheet from '../layout/sidesheet.svelte';
-    import { flags } from '$lib/flags';
     import type { PageData } from './$types';
     import { showCreateAttributeSheet } from '../store';
     import { isSmallViewport } from '$lib/stores/viewport';
@@ -94,6 +92,24 @@
     });
 </script>
 
+<Container
+    expanded
+    expandHeightButton={$isSmallViewport}
+    style="background: var(--bgcolor-neutral-primary)">
+    <Layout.Stack direction="row" justifyContent="flex-end">
+        {#if $canWriteTables}
+            <Button
+                secondary
+                event="create_index"
+                disabled={!$table?.columns?.length}
+                on:click={() => (showCreateIndex = true)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create index
+            </Button>
+        {/if}
+    </Layout.Stack>
+</Container>
+
 <div class="databases-spreadsheet">
     {#if data.table?.columns?.length}
         {#if data.table.indexes.length}

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

@@ -128,7 +128,7 @@
     const spreadsheetColumns = $derived(mode === 'rows' ? getRowColumns() : getIndexesColumns());
 
     const emptyCells = $derived($isSmallViewport ? 14 : 17);
-    const fixedHeight = $derived($isSmallViewport ? '60.75vh' : '74.75vh');
+    const fixedHeight = $derived($isSmallViewport ? '60.75vh' : '74.35vh');
 </script>
 
 <div class="spreadsheet-container-outer" data-mode={mode}>
@@ -311,11 +311,11 @@
         }
 
         @media (max-width: 1024px) {
-            height: 76vh;
+            height: 63.35vh;
         }
 
         @media (min-width: 1024px) {
-            height: 80.35vh;
+            height: 70.35vh;
         }
     }
 

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

@@ -9,7 +9,7 @@
     import UpdateStatus from './updateStatus.svelte';
 </script>
 
-<div class="wide-screen-wrapper databases-spreadsheet" style:padding-bottom="1rem">
+<div class="wide-screen-wrapper databases-spreadsheet">
     <Container expanded slotSpacing databasesScreen>
         {#if $table}
             <UpdateStatus />