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'};`, + `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> </script>
<!-- <!--
Outer flex container — fills parent. 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 --> <!-- Paper surface -->
<div <div
class={cn( class={cn(
'w-full h-full flex flex-col flex-center relative', 'w-full h-full flex flex-col flex-center relative',
'bg-paper dark:bg-dark-card', 'bg-paper dark:bg-dark-card',
'shadow-floating-panel dark:shadow-floating-panel-dark', 'shadow-floating-panel dark:shadow-floating-panel-dark',
'transition-transform duration-slow ease-out',
scaleClass,
)} )}
> >
<!-- Subtle grid overlay — pointer-events-none, very low opacity --> <!-- Subtle grid overlay — pointer-events-none, very low opacity -->