Add CSS containment to side panels to reduce repaints from canvas

This commit is contained in:
Danila Poyarkov 2026-03-01 00:45:20 +03:00
parent 8eff364dcd
commit 63cefe651c
2 changed files with 2 additions and 2 deletions

View file

@ -221,7 +221,7 @@ function updateDropTarget(ev: PointerEvent) {
</script>
<template>
<aside class="flex min-w-0 flex-1 flex-col overflow-y-auto border-r border-border bg-panel">
<aside class="flex min-w-0 flex-1 flex-col overflow-y-auto border-r border-border bg-panel" style="contain: paint layout style">
<PagesPanel />
<header class="shrink-0 px-3 py-2 text-[11px] uppercase tracking-wider text-muted">
Layers

View file

@ -24,7 +24,7 @@ const isComponentType = computed(() => {
</script>
<template>
<aside class="flex min-w-0 flex-1 flex-col overflow-hidden border-l border-border bg-panel">
<aside class="flex min-w-0 flex-1 flex-col overflow-hidden border-l border-border bg-panel" style="contain: paint layout style">
<!-- Tabs -->
<div class="flex h-10 shrink-0 items-center gap-1 border-b border-border px-2">
<button class="rounded px-2.5 py-1 text-xs font-semibold text-surface">Design</button>