diff --git a/ui/desktop/src/components/GooseMessage.tsx b/ui/desktop/src/components/GooseMessage.tsx
index 62bbe953..ca19513f 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 bfc5eaa3..e1b4dd74 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}