From cb38babdd7667c3b4a97a0edaedea9ae321f537f Mon Sep 17 00:00:00 2001
From: Lambda <lambda@multica.ai>
Date: Wed, 15 Jul 2026 11:42:43 +0800
Subject: [PATCH] fix(desktop): match canvas left margin to right when sidebar
 is collapsed

The shell canvas kept its static 2px left margin after the left sidebar
collapsed offcanvas, while the right edge uses an 8px margin. Animate the
left margin to 8px (same spring as the rest of the shell) whenever the
sidebar leaves the main flow, so the floating canvas sits symmetrically.

Fixes MUL-4780

Co-authored-by: multica-agent <github@multica.ai>
---
 .../src/components/desktop-layout.tsx         | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/renderer/src/components/desktop-layout.tsx b/apps/desktop/src/renderer/src/components/desktop-layout.tsx
index b4b716c118..8d39f99f21 100644
--- a/apps/desktop/src/renderer/src/components/desktop-layout.tsx
+++ b/apps/desktop/src/renderer/src/components/desktop-layout.tsx
@@ -129,6 +129,25 @@ function MainTopBar() {
   );
 }
 
+// The canvas hugs the expanded sidebar with a hairline gap. When the sidebar
+// leaves the main flow, the left margin must grow to mirror the fixed mr-2 so
+// the floating canvas sits symmetrically inside the window frame.
+function MainCanvas({ children }: { children: React.ReactNode }) {
+  const { state, isMobile } = useSidebar();
+  const sidebarHidden = state === "collapsed" || isMobile;
+
+  return (
+    <motion.div
+      animate={{ marginLeft: sidebarHidden ? 8 : 2 }}
+      className="relative flex flex-1 min-h-0 flex-col overflow-hidden mr-2 mb-2 rounded-xl bg-page-canvas ring-1 ring-surface-border shadow-[var(--surface-shadow)]"
+      initial={false}
+      transition={toolbarMotion}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
 function useInternalLinkHandler() {
   useEffect(() => {
     const handler = (e: Event) => {
@@ -219,10 +238,10 @@ export function DesktopShell() {
             {/* Right side: header + content container */}
             <motion.div layout transition={toolbarMotion} className="flex flex-1 min-w-0 flex-col">
               <MainTopBar />
-              <div className="relative flex flex-1 min-h-0 flex-col overflow-hidden mr-2 mb-2 ml-0.5 rounded-xl bg-page-canvas ring-1 ring-surface-border shadow-[var(--surface-shadow)]">
+              <MainCanvas>
                 <TabContent />
                 {slug && <FloatingChat />}
-              </div>
+              </MainCanvas>
             </motion.div>
           </SidebarProvider>
         </div>