Chore/architecture refactoring #42
@@ -266,22 +266,6 @@ $effect(() => {
|
||||
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>
|
||||
|
||||
<!--
|
||||
@@ -292,7 +276,7 @@ const paddingClass = $derived(
|
||||
class={cn(
|
||||
'flex-1 relative flex-center overflow-hidden surface-canvas',
|
||||
'transition-[padding] duration-slow ease-out',
|
||||
paddingClass,
|
||||
isSidebarOpen && !isMobile ? 'p-6' : 'p-0',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user