refactor(SliderArea): remove $derived className
This commit is contained in:
@@ -266,22 +266,6 @@ $effect(() => {
|
|||||||
cancelled = true;
|
cancelled = true;
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// Dynamic backgroundSize based on isMobile — can't express this in Tailwind.
|
|
||||||
// Color is set to currentColor so it respects dark mode via text color.
|
|
||||||
const gridStyle = $derived(
|
|
||||||
`background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); `
|
|
||||||
+ `background-size: ${isMobile ? '10px 10px' : '20px 20px'};`,
|
|
||||||
);
|
|
||||||
|
|
||||||
// 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>
|
</script>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
@@ -292,7 +276,7 @@ const paddingClass = $derived(
|
|||||||
class={cn(
|
class={cn(
|
||||||
'flex-1 relative flex-center overflow-hidden surface-canvas',
|
'flex-1 relative flex-center overflow-hidden surface-canvas',
|
||||||
'transition-[padding] duration-slow ease-out',
|
'transition-[padding] duration-slow ease-out',
|
||||||
paddingClass,
|
isSidebarOpen && !isMobile ? 'p-6' : 'p-0',
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user