update: align the buttons with tabs.

src/lib/layout/animatedTitle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { isTabletViewport } from '$lib/stores/viewport';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
     import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
     import { Button, Icon, Layout } from '@appwrite.io/pink-svelte';
     import type { Snippet } from 'svelte';
@@ -7,17 +7,25 @@
 
     let {
         href = null,
+        children = null,
         collapsed = false,
-        children,
+        backOnlyDesktop = false,
         ...restProps
     }: {
         href?: string | null;
         collapsed?: boolean;
         children?: Snippet;
+        backOnlyDesktop?: boolean;
     } & HTMLAttributes<HTMLDivElement> = $props();
 
     const buttonSize = $derived(collapsed ? 'xs' : 's');
-    const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxl)');
+    const currentFontSize = $derived(
+        collapsed
+            ? 'var(--font-size-l)'
+            : $isSmallViewport
+              ? 'var(--font-size-xl)'
+              : 'var(--font-size-xxl)'
+    );
 </script>
 
 <Layout.Stack
@@ -26,6 +34,7 @@
     direction="row"
     alignItems="center"
     justifyContent="center"
+    style={backOnlyDesktop && $isTabletViewport ? 'margin-inline-start: -2.5rem;' : ''}
     {...restProps}>
     {#if href}
         <span style:position="relative">

src/lib/layout/coverTitle.svelte

@@ -1,9 +1,20 @@
 <script lang="ts">
-    import { isSmallViewport } from '$lib/stores/viewport';
+    import type { Snippet } from 'svelte';
+    import type { HTMLAttributes } from 'svelte/elements';
     import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
     import { Typography, Button, Icon, Layout } from '@appwrite.io/pink-svelte';
 
-    export let href: string | null = null;
+    let {
+        href = null,
+        children = null,
+        backOnlyDesktop = false,
+        ...restProps
+    }: {
+        href?: string | null;
+        children?: Snippet;
+        backOnlyDesktop?: boolean;
+    } & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
 <Layout.Stack
@@ -12,10 +23,18 @@
     direction="row"
     alignItems="center"
     justifyContent="center"
-    {...$$restProps}>
+    style={backOnlyDesktop && $isTabletViewport ? 'margin-inline-start: -2.5rem;' : ''}
+    {...restProps}>
     {#if href}
         <span style:position="relative">
-            <Button.Anchor size="s" icon variant="text" {href} aria-label="page back">
+            <Button.Anchor
+                {href}
+                icon
+                size="s"
+                variant="text"
+                aria-label="page back"
+                disabled={backOnlyDesktop && $isTabletViewport}
+                style={backOnlyDesktop && $isTabletViewport ? 'visibility: hidden' : ''}>
                 <Icon icon={IconChevronLeft} />
             </Button.Anchor>
         </span>
@@ -25,6 +44,6 @@
         truncate
         color="--fgcolor-neutral-primary"
         size={$isSmallViewport ? 'm' : 'l'}>
-        <slot />
+        {@render children?.()}
     </Typography.Title>
 </Layout.Stack>

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

@@ -41,7 +41,7 @@
 <Cover>
     <svelte:fragment slot="header">
         <CoverTitle
-            style="margin-inline-start: -2.5rem;"
+            backOnlyDesktop
             href={`${base}/project-${page.params.region}-${projectId}/databases`}>
             {$database.name}
         </CoverTitle>

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

@@ -81,7 +81,7 @@
     collapsed={!$expandTabs}
     blocksize={$expandTabs ? '152px' : '90px'}>
     <svelte:fragment slot="header">
-        <AnimatedTitle href={link} collapsed={!$expandTabs} style="margin-inline-start: -2.5rem;">
+        <AnimatedTitle href={link} backOnlyDesktop collapsed={!$expandTabs}>
             {$table?.name}
         </AnimatedTitle>
 

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

@@ -53,8 +53,6 @@
     let resizeObserver: ResizeObserver;
     let dynamicOverlayHeight = $state('60.5vh');
 
-    let ready = $state(false);
-
     const baseColProps = { draggable: false, resizable: false };
 
     const updateOverlayHeight = () => {
@@ -86,8 +84,6 @@
             resizeObserver = new ResizeObserver(debouncedUpdateOverlayHeight);
             resizeObserver.observe(spreadsheetContainer);
         }
-
-        requestAnimationFrame(() => (ready = true));
     });
 
     onDestroy(() => {
@@ -245,7 +241,6 @@
     {#if !$spreadsheetLoading}
         <div
             class="spreadsheet-fade-bottom"
-            data-ready={ready}
             data-collapsed-tabs={!$expandTabs}
             style:--dynamic-overlay-height={dynamicOverlayHeight}>
             <div class="empty-actions">
@@ -345,10 +340,6 @@
 
         height: var(--dynamic-overlay-height, 70.5vh);
 
-        &[data-collapsed-tabs='true'] {
-            height: calc(var(--dynamic-overlay-height, 79.1vh) + 8.6vh);
-        }
-
         @media (max-width: 1024px) {
             height: var(--dynamic-overlay-height, 63.35vh);
         }
@@ -377,6 +368,10 @@
         bottom: 35%;
         position: fixed;
 
+        @media (max-width: 768px) {
+            bottom: 35%;
+        }
+
         @media (max-width: 1023px) {
             left: unset;
         }