From 63cefe651c92c10d576d1310f30cbb56fe65d2bb Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sun, 1 Mar 2026 00:45:20 +0300
Subject: [PATCH] Add CSS containment to side panels to reduce repaints from
 canvas

---
 src/components/LayersPanel.vue     | 2 +-
 src/components/PropertiesPanel.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LayersPanel.vue b/src/components/LayersPanel.vue
index 0086779a8..8af373f0e 100644
--- a/src/components/LayersPanel.vue
+++ b/src/components/LayersPanel.vue
@@ -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
diff --git a/src/components/PropertiesPanel.vue b/src/components/PropertiesPanel.vue
index f76fbd4a2..bdb3e9c9b 100644
--- a/src/components/PropertiesPanel.vue
+++ b/src/components/PropertiesPanel.vue
@@ -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>