bug(ui): fix spacing on non-chat pages (#919)

defenseunicorns · Aug 16, 2024 · dd0d14e · dd0d14e
1 parent b83ef04
commit dd0d14e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/leapfrogai_ui/src/app.css b/src/leapfrogai_ui/src/app.css
@@ -5,6 +5,7 @@
 :root {
   --header-height: 3rem;
   --message-input-height: 2.5rem;
+  --sidebar-width: 255px;
   scrollbar-color: #4b5563 #1f2937;
 }
 
@@ -14,7 +15,6 @@
     display: flex;
     flex-grow: 1;
     flex-direction: column;
-    max-width: calc(100% - 255px);
     overflow: auto;
     padding-top: 2rem;
     height: calc(100vh - var(--header-height));

diff --git a/src/leapfrogai_ui/src/lib/components/LFSidebar.svelte b/src/leapfrogai_ui/src/lib/components/LFSidebar.svelte
@@ -55,7 +55,7 @@
 <!--Custom styling allows center SidebarGroup (chat threads) to scroll-->
 <Sidebar
   data-testid="sidebar"
-  class="sidebar-height flex w-[255px] border-r border-gray-700  dark:bg-gray-800 "
+  class="sidebar-height flex w-[var(--sidebar-width)] border-r border-gray-700  dark:bg-gray-800 "
 >
   <SidebarWrapper class="flex w-full flex-col px-0">
     <SidebarGroup>

diff --git a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+layout.svelte b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+layout.svelte
@@ -14,7 +14,15 @@
 <div class="flex h-full">
   <SidebarWrapper />
 
-  <main class="content">
+  <main class="content chat-content">
     <slot />
   </main>
 </div>
+
+<style lang="scss">
+  .chat-content {
+    max-width: calc(
+      100% - var(--sidebar-width)
+    ); // prevents "random" shrinking of sidebar with some messages
+  }
+</style>