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:
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user