From bfe8024583019e5ca6d748a9c0a008bc7678c4c6 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 26 Nov 2025 13:39:27 +0530
Subject: [PATCH 1/5] add: spacing.

---
 src/lib/components/navbar.svelte | 3 ++-
 src/lib/studio/studio-widget.ts  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index f157e3211..cd798db9b 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -57,6 +57,7 @@
     import type { Models } from '@appwrite.io/console';
     import { organization } from '$lib/stores/organization';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
 
     let showSupport = false;
 
@@ -120,7 +121,7 @@
     beforeNavigate(() => (showAccountMenu = false));
 </script>
 
-<Navbar.Base --border-width-s="none">
+<Navbar.Base --border-width-s="none" style="top: {$bannerSpacing || '0px'};">
     <div slot="left" class="left">
         <div class="only-mobile-tablet">
             <button
diff --git a/src/lib/studio/studio-widget.ts b/src/lib/studio/studio-widget.ts
index ce737af36..b93e8bf12 100644
--- a/src/lib/studio/studio-widget.ts
+++ b/src/lib/studio/studio-widget.ts
@@ -12,7 +12,7 @@ import { headerAlert } from '$lib/stores/headerAlert';
 
 const COMPONENT_SELECTOR = 'imagine-web-components-wrapper[data-appwrite-studio]';
 const STYLE_ATTRIBUTE = 'data-appwrite-studio-style';
-const BLOCK_BANNER_OFFSET = 24;
+const BLOCK_BANNER_OFFSET = 96;
 const BLOCK_START_BASE_OFFSET = 48;
 export const CDN_URL = env?.PUBLIC_IMAGINE_CDN_URL + '/web-components.js';
 export const CDN_CSS_URL = env?.PUBLIC_IMAGINE_CDN_URL + '/web-components.css';

From 9c9d5b7be640c130c583df08d9f83f62ac1bc0a7 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 26 Nov 2025 14:28:19 +0530
Subject: [PATCH 2/5] update: improved logic with backwards compat.

---
 .../components/billing/gradientBanner.svelte  | 14 +++++++++++--
 src/lib/layout/headerAlert.svelte             | 12 +++++++++++
 src/lib/stores/headerAlert.ts                 | 21 ++++++++++++++-----
 src/lib/studio/studio-widget.ts               |  3 +--
 4 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/billing/gradientBanner.svelte b/src/lib/components/billing/gradientBanner.svelte
index 7f9b62a64..8b61fff3d 100644
--- a/src/lib/components/billing/gradientBanner.svelte
+++ b/src/lib/components/billing/gradientBanner.svelte
@@ -7,6 +7,8 @@
     import PinkBackground from '$lib/images/pink-background.svg';
     import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
     import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+    import { headerAlert } from '$lib/stores/headerAlert';
+    import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
 
     export let variant: 'gradient' | 'image' = 'gradient';
 
@@ -16,12 +18,13 @@
     const queryLayoutElements = () => ({
         header: document.querySelector<HTMLElement>('main > header'),
         sidebar: document.querySelector<HTMLElement>('main > div > nav'),
-        content: document.querySelector<HTMLElement>('main > div > section')
+        content: document.querySelector<HTMLElement>('main > div > section'),
+        contentDiv: document.querySelector<HTMLElement>('main > .content')
     });
 
     const setNavigationHeight = () => {
         const alertHeight = container?.getBoundingClientRect()?.height || 0;
-        const { header, sidebar, content } = queryLayoutElements();
+        const { header, sidebar, content, contentDiv } = queryLayoutElements();
         const headerHeight = header?.getBoundingClientRect().height || 0;
         const offset = alertHeight + (!$isTabletViewport && header ? headerHeight : 0);
 
@@ -35,11 +38,18 @@
 
             // for sidebar and sub-navigation!
             bannerSpacing.set(`${alertHeight}px`);
+            headerAlert.setTopSpacing(alertHeight);
         }
 
         if (content) {
             content.style.paddingBlockStart = `${alertHeight}px`;
         }
+
+        if (contentDiv && resolvedProfile.id === ProfileMode.STUDIO) {
+            const headerHeight = header?.getBoundingClientRect().height ?? 0;
+            // push the content enough to show the borders of the content view!
+            contentDiv.style.marginBlockStart = `${alertHeight + headerHeight}px`;
+        }
     };
 
     onMount(setNavigationHeight);
diff --git a/src/lib/layout/headerAlert.svelte b/src/lib/layout/headerAlert.svelte
index bb428cdcf..3338cfca9 100644
--- a/src/lib/layout/headerAlert.svelte
+++ b/src/lib/layout/headerAlert.svelte
@@ -1,6 +1,7 @@
 <script module lang="ts">
     import { writable } from 'svelte/store';
 
+    // this is for backwards compatibility rn.
     export const bannerSpacing = writable<string | null>(null);
 </script>
 
@@ -12,6 +13,8 @@
     import { Icon } from '@appwrite.io/pink-svelte';
     import { IconX } from '@appwrite.io/pink-icons-svelte';
     import { afterNavigate } from '$app/navigation';
+    import { headerAlert } from '$lib/stores/headerAlert';
+    import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
 
     export let title: string;
     export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
@@ -31,12 +34,15 @@
         const header: HTMLHeadingElement = document.querySelector('main > header');
         const sidebar: HTMLElement = document.querySelector('main > div > nav');
         const contentSection: HTMLElement = document.querySelector('main > div > section');
+        const contentDiv: HTMLElement = document.querySelector('main > .content');
 
         if (alertHeight) {
             // for sidebar and sub-navigation!
             bannerSpacing.set(`${alertHeight}px`);
+            headerAlert.setTopSpacing(alertHeight);
         } else {
             bannerSpacing.set(undefined);
+            headerAlert.setTopSpacing(0);
         }
 
         if (header) {
@@ -54,6 +60,12 @@
         if (contentSection) {
             contentSection.style.paddingBlockStart = `${alertHeight}px`;
         }
+
+        if (contentDiv && resolvedProfile.id === ProfileMode.STUDIO) {
+            const headerHeight = header?.getBoundingClientRect().height ?? 0;
+            // push the content enough to show the borders of the content view!
+            contentDiv.style.marginBlockStart = `${alertHeight + headerHeight}px`;
+        }
     }
 
     onMount(() => {
diff --git a/src/lib/stores/headerAlert.ts b/src/lib/stores/headerAlert.ts
index 48d1f0c0c..b765a23fc 100644
--- a/src/lib/stores/headerAlert.ts
+++ b/src/lib/stores/headerAlert.ts
@@ -9,11 +9,13 @@ export type HeaderAlert = {
 };
 
 export type HeaderAlertStore = {
+    top: number;
     components: HeaderAlert[];
 };
 
 function createHeaderAlertStore() {
-    const { subscribe, update, set } = writable<HeaderAlertStore>({
+    const { set, update, subscribe } = writable<HeaderAlertStore>({
+        top: 0,
         components: []
     });
 
@@ -48,14 +50,23 @@ function createHeaderAlertStore() {
             });
             return component as HeaderAlert;
         },
-        isShowing: (): boolean => {
-            let showing = false;
+        setTopSpacing: (value: number) => {
+            update((n) => {
+                return {
+                    ...n,
+                    top: value
+                };
+            });
+        },
+        getTopSpacing: (): number => {
+            let top = 0;
             update((n) => {
                 if (n.components.length === 0) return n;
-                showing = n.components.some((c) => c.show);
+                top = n.top;
                 return n;
             });
-            return showing;
+
+            return top;
         }
     };
 }
diff --git a/src/lib/studio/studio-widget.ts b/src/lib/studio/studio-widget.ts
index b93e8bf12..0a856e937 100644
--- a/src/lib/studio/studio-widget.ts
+++ b/src/lib/studio/studio-widget.ts
@@ -12,7 +12,6 @@ import { headerAlert } from '$lib/stores/headerAlert';
 
 const COMPONENT_SELECTOR = 'imagine-web-components-wrapper[data-appwrite-studio]';
 const STYLE_ATTRIBUTE = 'data-appwrite-studio-style';
-const BLOCK_BANNER_OFFSET = 96;
 const BLOCK_START_BASE_OFFSET = 48;
 export const CDN_URL = env?.PUBLIC_IMAGINE_CDN_URL + '/web-components.js';
 export const CDN_CSS_URL = env?.PUBLIC_IMAGINE_CDN_URL + '/web-components.css';
@@ -196,7 +195,7 @@ function updatePosition() {
         return;
     }
 
-    const bannerOffset = headerAlert.isShowing() ? BLOCK_BANNER_OFFSET : 0;
+    const bannerOffset = headerAlert.getTopSpacing();
 
     const rect = anchorElement.getBoundingClientRect();
     const { offsetX, offsetY } = currentOptions;

From 57af06a9fe155c62d853874827e2d62f8d7b5abc Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 26 Nov 2025 14:41:13 +0530
Subject: [PATCH 3/5] update: improved logic.

---
 src/lib/components/billing/gradientBanner.svelte     |  4 +---
 src/lib/components/navbar.svelte                     |  4 ++--
 src/lib/components/sidebar.svelte                    | 10 +++++-----
 src/lib/layout/headerAlert.svelte                    | 11 +----------
 src/lib/stores/headerAlert.ts                        | 12 ++++++++++--
 .../database-[database]/subNavigation.svelte         |  6 +++---
 6 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/billing/gradientBanner.svelte b/src/lib/components/billing/gradientBanner.svelte
index 8b61fff3d..866112c3b 100644
--- a/src/lib/components/billing/gradientBanner.svelte
+++ b/src/lib/components/billing/gradientBanner.svelte
@@ -5,7 +5,6 @@
     import { IconX } from '@appwrite.io/pink-icons-svelte';
     import { isTabletViewport } from '$lib/stores/viewport';
     import PinkBackground from '$lib/images/pink-background.svg';
-    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
     import { createEventDispatcher, onMount, onDestroy } from 'svelte';
     import { headerAlert } from '$lib/stores/headerAlert';
     import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
@@ -37,7 +36,6 @@
             sidebar.style.height = `calc(100vh - ${offset}px)`;
 
             // for sidebar and sub-navigation!
-            bannerSpacing.set(`${alertHeight}px`);
             headerAlert.setTopSpacing(alertHeight);
         }
 
@@ -46,7 +44,7 @@
         }
 
         if (contentDiv && resolvedProfile.id === ProfileMode.STUDIO) {
-            const headerHeight = header?.getBoundingClientRect().height ?? 0;
+            const headerHeight = header?.getBoundingClientRect().height ?? 48;
             // push the content enough to show the borders of the content view!
             contentDiv.style.marginBlockStart = `${alertHeight + headerHeight}px`;
         }
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index cd798db9b..55d6438c4 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -57,7 +57,7 @@
     import type { Models } from '@appwrite.io/console';
     import { organization } from '$lib/stores/organization';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
-    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
+    import { headerAlert } from '$lib/stores/headerAlert';
 
     let showSupport = false;
 
@@ -121,7 +121,7 @@
     beforeNavigate(() => (showAccountMenu = false));
 </script>
 
-<Navbar.Base --border-width-s="none" style="top: {$bannerSpacing || '0px'};">
+<Navbar.Base --border-width-s="none" style="top: {$headerAlert.top}px;">
     <div slot="left" class="left">
         <div class="only-mobile-tablet">
             <button
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 876773e81..32d10a822 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -37,12 +37,12 @@
     import { getSidebarState, isInDatabasesRoute, updateSidebarState } from '$lib/helpers/sidebar';
     import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
     import { Click, trackEvent } from '$lib/actions/analytics';
-    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
 
-    import type { HTMLAttributes } from 'svelte/elements';
-    import type { Models } from '@appwrite.io/console';
-    import { noWidthTransition } from '$lib/stores/sidebar';
     import { base } from '$app/paths';
+    import type { Models } from '@appwrite.io/console';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { headerAlert } from '$lib/stores/headerAlert';
+    import { noWidthTransition } from '$lib/stores/sidebar';
     import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
 
     type Props = HTMLAttributes<HTMLElement> & {
@@ -399,7 +399,7 @@
     </Sidebar.Base>
 </div>
 
-<div style:--banner-spacing={$bannerSpacing ? $bannerSpacing : undefined}>
+<div style:--banner-spacing={$headerAlert.top ? `${$headerAlert.top}px` : undefined}>
     {#if subNavigation}
         {@const SubNavigation = subNavigation}
         <div
diff --git a/src/lib/layout/headerAlert.svelte b/src/lib/layout/headerAlert.svelte
index 3338cfca9..a5e222620 100644
--- a/src/lib/layout/headerAlert.svelte
+++ b/src/lib/layout/headerAlert.svelte
@@ -1,10 +1,3 @@
-<script module lang="ts">
-    import { writable } from 'svelte/store';
-
-    // this is for backwards compatibility rn.
-    export const bannerSpacing = writable<string | null>(null);
-</script>
-
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
     import { isTabletViewport } from '$lib/stores/viewport';
@@ -38,10 +31,8 @@
 
         if (alertHeight) {
             // for sidebar and sub-navigation!
-            bannerSpacing.set(`${alertHeight}px`);
             headerAlert.setTopSpacing(alertHeight);
         } else {
-            bannerSpacing.set(undefined);
             headerAlert.setTopSpacing(0);
         }
 
@@ -62,7 +53,7 @@
         }
 
         if (contentDiv && resolvedProfile.id === ProfileMode.STUDIO) {
-            const headerHeight = header?.getBoundingClientRect().height ?? 0;
+            const headerHeight = header?.getBoundingClientRect().height ?? 48;
             // push the content enough to show the borders of the content view!
             contentDiv.style.marginBlockStart = `${alertHeight + headerHeight}px`;
         }
diff --git a/src/lib/stores/headerAlert.ts b/src/lib/stores/headerAlert.ts
index b765a23fc..a0f62dac3 100644
--- a/src/lib/stores/headerAlert.ts
+++ b/src/lib/stores/headerAlert.ts
@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import { writable } from 'svelte/store';
+import { writable, type Readable } from 'svelte/store';
 
 export type HeaderAlert = {
     id: string;
@@ -13,7 +13,15 @@ export type HeaderAlertStore = {
     components: HeaderAlert[];
 };
 
-function createHeaderAlertStore() {
+export type HeaderAlertStoreType = Readable<HeaderAlertStore> & {
+    set: (value: HeaderAlertStore) => void;
+    add: (component: HeaderAlert) => void;
+    get: () => HeaderAlert;
+    setTopSpacing: (value: number) => void;
+    getTopSpacing: () => number;
+};
+
+function createHeaderAlertStore(): HeaderAlertStoreType {
     const { set, update, subscribe } = writable<HeaderAlertStore>({
         top: 0,
         components: []
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 4b5354ffd..f99a7bbf6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -3,7 +3,6 @@
     import { page } from '$app/state';
     import type { PageData } from './$types';
     import { showSubNavigation } from '$lib/stores/layout';
-    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
     import { showCreateTable, databaseSubNavigationItems } from './store';
 
     import {
@@ -28,6 +27,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { subNavigation } from '$lib/stores/database';
+    import { headerAlert } from '$lib/stores/headerAlert';
 
     const data = $derived(page.data) as PageData;
 
@@ -58,8 +58,8 @@
     // If banner open, adjust bottom position to account for banner container.
     // 70.5px is the size of the container of the banner holder and not just the banner!
     // Needed because things vary a bit much on how different browsers treat bottom layouts.
-    const bottomNavOffset = $derived($bannerSpacing ? '70.5px' : '0px');
-    const tableContentPadding = $derived($bannerSpacing ? '210px' : '140px');
+    const bottomNavOffset = $derived($headerAlert.top !== 0 ? '70.5px' : '0px');
+    const tableContentPadding = $derived($headerAlert.top !== 0 ? '210px' : '140px');
 
     async function loadTables() {
         tables = await sdk.forProject(region, project).tablesDB.listTables({

From 8e2677887e4f5977cbee43b25be6d45ad221bda4 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 26 Nov 2025 15:05:35 +0530
Subject: [PATCH 4/5] fix: sidebar.

---
 src/lib/components/navbar.svelte  | 2 +-
 src/lib/components/sidebar.svelte | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 55d6438c4..dcdf4eaee 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -121,7 +121,7 @@
     beforeNavigate(() => (showAccountMenu = false));
 </script>
 
-<Navbar.Base --border-width-s="none" style="top: {$headerAlert.top}px;">
+<Navbar.Base --border-width-s="none" style="top: {$headerAlert.top}px; z-index: 100;">
     <div slot="left" class="left">
         <div class="only-mobile-tablet">
             <button
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 32d10a822..246d78471 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -127,7 +127,9 @@
         {...rest}
         bind:state
         on:resize={(event) => updateSidebarState(event.detail)}
-        resizable={resolvedProfile.id !== ProfileMode.STUDIO}>
+        resizable={resolvedProfile.id !== ProfileMode.STUDIO}
+        style="padding-block-start: {$headerAlert.top}px"
+    >
         <div slot="top">
             <div class="only-mobile-tablet top">
                 <div class="icons search-icon">

From e4a63b5e638768a2089f520d5a43119e1b95d40f Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 26 Nov 2025 18:02:15 +0530
Subject: [PATCH 5/5] lint,

---
 src/lib/components/sidebar.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 246d78471..8d8ef5f5d 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -128,8 +128,7 @@
         bind:state
         on:resize={(event) => updateSidebarState(event.detail)}
         resizable={resolvedProfile.id !== ProfileMode.STUDIO}
-        style="padding-block-start: {$headerAlert.top}px"
-    >
+        style="padding-block-start: {$headerAlert.top}px">
         <div slot="top">
             <div class="only-mobile-tablet top">
                 <div class="icons search-icon">