update: improved empty sheet view; fix: empty spacing on mobile at top.

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

@@ -130,7 +130,9 @@
 
     const emptyCellsLimit = $derived($isSmallViewport ? 14 : 16);
     const emptyCellsCount = $derived(
-        $columns.length >= emptyCellsLimit ? 0 : emptyCellsLimit - $columns.length
+        updatedColumnsForSheet.length >= emptyCellsLimit
+            ? 0
+            : emptyCellsLimit - updatedColumnsForSheet.length
     );
 
     onMount(() => {

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

@@ -6,7 +6,7 @@
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteTables } from '$lib/stores/roles';
     import { table } from './store';
-    import { isTabletViewport } from '$lib/stores/viewport';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
 
     const databaseId = $derived(page.params.database);
 
@@ -56,7 +56,7 @@
     );
 </script>
 
-<div style:margin-top={$isTabletViewport ? '48px' : 0}>
+<div style:margin-top={$isTabletViewport && !$isSmallViewport ? '48px' : 0}>
     <Cover expanded>
         <svelte:fragment slot="header">
             <CoverTitle

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

@@ -16,7 +16,7 @@
         Layout,
         Link,
         Popover,
-        Spreadsheet
+        Spreadsheet, Typography
     } from '@appwrite.io/pink-svelte';
     import {
         IconDotsHorizontal,
@@ -33,6 +33,7 @@
     import { flags } from '$lib/flags';
     import type { PageData } from './$types';
     import { showCreateAttributeSheet } from '../store';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     let {
         data
@@ -82,6 +83,13 @@
     });
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));
+
+    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 16);
+    const emptyCellsCount = $derived(
+        data.table.indexes.length >= emptyCellsLimit
+            ? 0
+            : emptyCellsLimit - data.table.indexes.length
+    );
 </script>
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
@@ -106,7 +114,9 @@
                 <Spreadsheet.Root
                     let:root
                     {columns}
+                    height="100%"
                     allowSelection
+                    emptyCells={emptyCellsCount}
                     bind:selectedRows={selectedIndexes}>
                     <svelte:fragment slot="header" let:root>
                         <Spreadsheet.Header.Cell column="key" {root}>Key</Spreadsheet.Header.Cell>
@@ -121,6 +131,7 @@
                         {/if}
                         <Spreadsheet.Header.Cell column="actions" {root} />
                     </svelte:fragment>
+
                     {#each data.table.indexes as index}
                         <Spreadsheet.Row.Base {root} id={index.key}>
                             <Spreadsheet.Cell column="key" {root} isEditable={false}>
@@ -182,6 +193,18 @@
                             </Spreadsheet.Cell>
                         </Spreadsheet.Row.Base>
                     {/each}
+
+                    <svelte:fragment slot="footer">
+                        <Layout.Stack
+                            direction="row"
+                            alignContent="center"
+                            alignItems="center"
+                            justifyContent="space-between">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                                {data.table.indexes.length} columns
+                            </Typography.Text>
+                        </Layout.Stack>
+                    </svelte:fragment>
                 </Spreadsheet.Root>
             </SpreadsheetContainer>
         {:else}

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

@@ -1,5 +1,13 @@
 <script lang="ts">
-    import { Badge, Button, Icon, Layout, Spreadsheet, Typography } from '@appwrite.io/pink-svelte';
+    import {
+        Badge,
+        Button,
+        Icon,
+        Layout,
+        Skeleton,
+        Spreadsheet,
+        Typography
+    } from '@appwrite.io/pink-svelte';
 
     import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
@@ -106,15 +114,21 @@
     const spreadsheetColumns = $derived(
         mode === 'records' ? getRecordsColumns() : getIndexesColumns()
     );
+
+    const emptyCells = $derived($isSmallViewport ? 14 : 17);
+    const fixedHeight = $derived($isSmallViewport ? '60.75vh' : '74.75vh');
 </script>
 
 <div class="spreadsheet-container-outer" data-mode={mode}>
     <Spreadsheet.Root
+        {emptyCells}
         allowSelection
-        emptyCells={12}
-        height="fit-content"
+        height={fixedHeight}
         columns={spreadsheetColumns}
-        loading={$spreadsheetLoading}>
+        loading={$spreadsheetLoading}
+        bottomActionClick={() => {
+            /* @ignore: only for showing the `+` button on footer */
+        }}>
         <svelte:fragment slot="header" let:root>
             {#each spreadsheetColumns as column (column.id)}
                 {@const columnActionsById = column.id === 'actions'}
@@ -165,43 +179,55 @@
                 </div>
             {/each}
         </svelte:fragment>
+
+        <svelte:fragment slot="footer">
+            <Layout.Stack
+                direction="row"
+                alignContent="center"
+                alignItems="center"
+                justifyContent="space-between">
+                <Skeleton variant="line" height={18} width={125} />
+            </Layout.Stack>
+        </svelte:fragment>
     </Spreadsheet.Root>
 
-    <div class="spreadsheet-fade-bottom">
-        <div class="empty-actions">
-            <Layout.Stack gap="xl" alignItems="center">
-                <Typography.Title>{title ?? `You have no ${mode} yet`}</Typography.Title>
+    {#if !$spreadsheetLoading}
+        <div class="spreadsheet-fade-bottom">
+            <div class="empty-actions">
+                <Layout.Stack gap="xl" alignItems="center">
+                    <Typography.Title>{title ?? `You have no ${mode} yet`}</Typography.Title>
 
-                {#if showActions}
-                    <Layout.Stack
-                        inline
-                        alignItems="center"
-                        direction={$isSmallViewport ? 'column' : 'row'}
-                        gap="s">
-                        <Button.Button
-                            icon
-                            size="s"
-                            variant="secondary"
-                            disabled={actions?.primary?.disabled}
-                            onclick={actions?.primary?.onClick}>
-                            <Icon icon={IconPlus} size="s" />
-                            {actions?.primary?.text ?? `Create ${mode}`}
-                        </Button.Button>
-
-                        {#if mode === 'records'}
+                    {#if showActions}
+                        <Layout.Stack
+                            inline
+                            alignItems="center"
+                            direction={$isSmallViewport ? 'column' : 'row'}
+                            gap="s">
                             <Button.Button
+                                icon
                                 size="s"
                                 variant="secondary"
-                                disabled={actions?.random?.disabled}
-                                onclick={actions?.random?.onClick}>
-                                {actions?.random?.text ?? `Generate random data`}
+                                disabled={actions?.primary?.disabled}
+                                onclick={actions?.primary?.onClick}>
+                                <Icon icon={IconPlus} size="s" />
+                                {actions?.primary?.text ?? `Create ${mode}`}
                             </Button.Button>
-                        {/if}
-                    </Layout.Stack>
-                {/if}
-            </Layout.Stack>
+
+                            {#if mode === 'records'}
+                                <Button.Button
+                                    size="s"
+                                    variant="secondary"
+                                    disabled={actions?.random?.disabled}
+                                    onclick={actions?.random?.onClick}>
+                                    {actions?.random?.text ?? `Generate random data`}
+                                </Button.Button>
+                            {/if}
+                        </Layout.Stack>
+                    {/if}
+                </Layout.Stack>
+            </div>
         </div>
-    </div>
+    {/if}
 </div>
 
 <style lang="scss">