From 7aa2e8912b686460bf080c736db116429a5e3877 Mon Sep 17 00:00:00 2001
From: Zane <75694352+zanesq@users.noreply.github.com>
Date: Wed, 23 Jul 2025 12:56:39 -0700
Subject: [PATCH] fix: chat sidebar layout overlapping content occasionally
 (#3590)

---
 ui/desktop/src/components/GooseMessage.tsx |  4 ++--
 ui/desktop/src/components/ui/sidebar.tsx   | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/desktop/src/components/GooseMessage.tsx b/ui/desktop/src/components/GooseMessage.tsx
index 62bbe95321..ca19513f1c 100644
--- a/ui/desktop/src/components/GooseMessage.tsx
+++ b/ui/desktop/src/components/GooseMessage.tsx
@@ -146,8 +146,8 @@ export default function GooseMessage({
   ]);
 
   return (
-    <div className="goose-message flex w-[90%] justify-start">
-      <div className="flex flex-col w-full">
+    <div className="goose-message flex w-[90%] justify-start min-w-0">
+      <div className="flex flex-col w-full min-w-0">
         {/* Chain-of-Thought (hidden by default) */}
         {cotText && (
           <details className="bg-bgSubtle border border-borderSubtle rounded p-2 mb-2">
diff --git a/ui/desktop/src/components/ui/sidebar.tsx b/ui/desktop/src/components/ui/sidebar.tsx
index bfc5eaa337..e1b4dd741c 100644
--- a/ui/desktop/src/components/ui/sidebar.tsx
+++ b/ui/desktop/src/components/ui/sidebar.tsx
@@ -294,8 +294,14 @@ function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        'bg-background relative flex w-full flex-1 flex-col',
-        'md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0 md:peer-data-[variant=inset]:shadow-sm',
+        'bg-background relative flex w-full flex-1 flex-col min-w-0',
+        // For inset variant (used in the app)
+        'md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
+        // For offcanvas variant - ensure content doesn't go under sidebar
+        'md:peer-data-[collapsible=offcanvas]:peer-data-[state=expanded]:ml-[var(--sidebar-width)]',
+        'md:peer-data-[collapsible=offcanvas]:peer-data-[state=collapsed]:ml-0',
+        // Smooth transition when sidebar state changes
+        'transition-[margin-left] duration-300 ease-out',
         className
       )}
       {...props}