From b5fec3a1ba54456c5bf9cc93e563ea1b6a436006 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 10:57:23 +0300
Subject: [PATCH] fix(SliderArea): inset paper with padding instead of scale
 for even gaps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

scale-[0.94] shrinks proportionally — on wide viewports this produced
visibly larger horizontal gaps than vertical ones when the sidebar
opens, and it left the text engine measuring the un-scaled width
(causing the thumb-to-character morph boundary to drift).

Switch to outer-container padding (p-6 when sidebar is open on desktop)
so the paper inherits an equal pixel inset on all four sides. The
ResizeObserver picks up the new dimensions and the layout engine
re-wraps text at the actual rendered width.
---
 .../ui/SliderArea/SliderArea.svelte           | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index d717e4b..310ed0b 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/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 }}
-const scaleClass = $derived(
-    isSidebarOpen && !isMobile
-        ? 'scale-[0.94]'
-        : 'scale-100',
+// When the sidebar opens on desktop, the canvas pads in on every side
+// so the paper insets evenly (equal pixel gaps top/bottom/left/right)
+// instead of shrinking proportionally with a transform — which on wide
+// viewports produced uneven horizontal vs. vertical gaps and also
+// 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 -->