src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte

@@ -221,27 +221,34 @@ const gridStyle = $derived(
         + `background-size: ${isMobile ? '10px 10px' : '20px 20px'};`,
 );
 
-// Replaces motion.div animate={{ scale: isSidebarOpen && !isMobile ? 0.94 :1 }}
+// When the sidebar opens on desktop, the canvas pads in on every side
-const scaleClass = $derived(
+// so the paper insets evenly (equal pixel gaps top/bottom/left/right)
-    isSidebarOpen && !isMobile
+// instead of shrinking proportionally with a transform — which on wide
-        ? 'scale-[0.94]'
+// viewports produced uneven horizontal vs. vertical gaps and also
-        : 'scale-100',
+// caused the layout engine to measure the un-scaled width.
+const paddingClass = $derived(
+    isSidebarOpen && !isMobile ? 'p-6' : 'p-0',
 );
 </script>
 
 <!--
     Outer flex container — fills parent.
-    The paper div inside scales down when the sidebar opens on desktop.
+    Pads in when the sidebar opens on desktop, insetting the paper evenly.
 -->
-<div class={cn('flex-1 relative flex-center p-0 overflow-hidden surface-canvas', className)}>
+<div
+    class={cn(
+        'flex-1 relative flex-center overflow-hidden surface-canvas',
+        'transition-[padding] duration-slow ease-out',
+        paddingClass,
+        className,
+    )}
+>
     <!-- Paper surface -->
     <div
         class={cn(
             'w-full h-full flex flex-col flex-center relative',
             'bg-paper dark:bg-dark-card',
             'shadow-floating-panel dark:shadow-floating-panel-dark',
-            'transition-transform duration-slow ease-out',
-            scaleClass,
         )}
     >
         <!-- Subtle grid overlay — pointer-events-none, very low opacity -->