From 9d9e0a974599460ed6dc71b5f2632dc090ecd8a5 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 8 Apr 2025 15:36:53 +0200
Subject: [PATCH] Fix subnavigation (collections databases) for mobile

---
 src/lib/components/chat/chat.svelte | 13 +++++++++++--
 src/lib/layout/shellStudio.svelte   | 15 ++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/chat/chat.svelte b/src/lib/components/chat/chat.svelte
index 249996bf6..1fb3c87ce 100644
--- a/src/lib/components/chat/chat.svelte
+++ b/src/lib/components/chat/chat.svelte
@@ -12,8 +12,9 @@
     type Props = {
         showChat: boolean;
         width: number;
+        hasSubNavigation: boolean;
     };
-    let { showChat = $bindable(), width }: Props = $props();
+    let { showChat = $bindable(), width, hasSubNavigation }: Props = $props();
 
     let minimizeChat = $state($isSmallViewport ? true : false);
 </script>
@@ -22,7 +23,8 @@
     class="chat"
     style:width={$isSmallViewport ? 'calc(100vw - 16px)' : showChat ? `${width}px` : 0}
     class:minimize-chat={minimizeChat}
-    class:is-visible={showChat}>
+    class:is-visible={showChat}
+    class:sub-navigation={hasSubNavigation}>
     <div class="chat-content">
         {#if !minimizeChat}
             <header>
@@ -95,6 +97,13 @@
             top: 48px;
             height: calc(100vh - 70px);
         }
+
+        &.sub-navigation {
+            @media (max-width: 1024px) {
+                top: 96px;
+                height: calc(100vh - 96px);
+            }
+        }
     }
     .chat.minimize-chat {
         top: auto;
diff --git a/src/lib/layout/shellStudio.svelte b/src/lib/layout/shellStudio.svelte
index 345d4285f..21646a41d 100644
--- a/src/lib/layout/shellStudio.svelte
+++ b/src/lib/layout/shellStudio.svelte
@@ -120,7 +120,10 @@
             class:sub-navigation={$page.data.subNavigation}>
             {#if $isSmallViewport}
                 {#if hasProjectSidebar}
-                    <Chat bind:showChat={$showChat} width={chatWidth} />
+                    <Chat
+                        bind:showChat={$showChat}
+                        width={chatWidth}
+                        hasSubNavigation={$page.data?.subNavigation} />
                 {/if}
                 <Card.Base>
                     <Layout.Stack>
@@ -133,7 +136,10 @@
             {:else}
                 <Layout.Stack direction="row" gap="l">
                     {#if hasProjectSidebar}
-                        <Chat bind:showChat={$showChat} width={chatWidth} />
+                        <Chat
+                            bind:showChat={$showChat}
+                            width={chatWidth}
+                            hasSubNavigation={$page.data?.subNavigation} />
                         {#if $showChat}
                             <div
                                 class="resizer"
@@ -218,7 +224,9 @@
             }
 
             &.sub-navigation {
+                margin-top: 96px;
                 @media (min-width: 1024px) {
+                    margin-top: 48px;
                     width: calc(100vw - 320px);
                     margin-left: 215px;
                 }
@@ -300,7 +308,8 @@
         }
     }
 
-    :global(.sub-navigation nav) {
+    :global(.sub-navigation nav),
+    :global(.sub-navigation header) {
         --bgcolor-neutral-primary: var(--bgcolor-neutral-default);
         --border-width-s: 0;
     }