fix(SliderArea): inset paper with padding instead of scale for even gaps

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.
This commit is contained in:
Ilia Mashkov
2026-05-25 10:57:23 +03:00
parent 8eee815e9a
commit b5fec3a1ba
@@ -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 -->