From 0362777a51930298c9ecc81813eefddc8517ec60 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Wed, 14 Oct 2026 04:31:18 +0200
Subject: [PATCH] fix(frontend): opened policy rule stays in view while its
 card grows, chevrons hold one column, switch and field sizes match the rest

---
 .../lib/components/policy/PolicyCard.svelte   | 10 +++---
 .../lib/components/policy/PolicyEditor.svelte | 36 ++++++++++++++++---
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/policy/PolicyCard.svelte b/frontend/src/lib/components/policy/PolicyCard.svelte
index 7619458..113999e 100644
--- a/frontend/src/lib/components/policy/PolicyCard.svelte
+++ b/frontend/src/lib/components/policy/PolicyCard.svelte
@@ -509,10 +509,10 @@
     flex-shrink: 0;
     align-items: center;
 
-    width: 2.125rem;
-    height: 1.25rem;
+    width: 2.25rem;
+    height: 1.375rem;
     padding: 0.125rem;
-    border-radius: 0.625rem;
+    border-radius: 0.6875rem;
 
     background-color: var(--color-borders-input);
 
@@ -524,8 +524,8 @@
   }
 
   .knob {
-    width: 1rem;
-    height: 1rem;
+    width: 1.125rem;
+    height: 1.125rem;
     border-radius: 50%;
 
     background-color: var(--color-white);
diff --git a/frontend/src/lib/components/policy/PolicyEditor.svelte b/frontend/src/lib/components/policy/PolicyEditor.svelte
index fcf17ce..ceb7685 100644
--- a/frontend/src/lib/components/policy/PolicyEditor.svelte
+++ b/frontend/src/lib/components/policy/PolicyEditor.svelte
@@ -107,9 +107,11 @@
   }
 
   function reveal(node: HTMLElement) {
-    requestAnimationFrame(() => {
+    const observer = new ResizeObserver(() => {
       node.parentElement?.scrollIntoView({ block: "nearest" });
     });
+    observer.observe(node);
+    return () => observer.disconnect();
   }
 
   function draftBefore(rule: PolicyRule): boolean {
@@ -237,13 +239,21 @@
             </span>
           {/if}
         </span>
-        <Icon name={open ? "up" : "down"} size="1.125rem" />
       </button>
       {#if extra}
         <Button onclick={() => drop(rule)} smaller variant="text">
           Убрать
         </Button>
       {/if}
+      <button
+        aria-hidden="true"
+        class="chevron"
+        onclick={() => toggle(rule)}
+        tabindex="-1"
+        type="button"
+      >
+        <Icon name={open ? "up" : "down"} size="1.125rem" />
+      </button>
     </div>
     {#if open}
       <div class="editor" {@attach reveal}>
@@ -474,7 +484,7 @@
   .line {
     display: flex;
     align-items: center;
-    padding-right: 0.5rem;
+    padding-right: 0.375rem;
   }
 
   .main {
@@ -516,6 +526,24 @@
     }
   }
 
+  .chevron {
+    cursor: pointer;
+
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 2rem;
+    height: 2.5rem;
+    padding: 0;
+    border: 0;
+
+    color: var(--color-text-secondary);
+
+    background: none;
+  }
+
   .glyph {
     display: flex;
     flex-shrink: 0;
@@ -619,7 +647,7 @@
     margin: 0.25rem 0.5rem 0.5rem;
     padding: 0.5rem 0.75rem;
     border: 1px solid var(--color-borders);
-    border-radius: var(--border-radius-default-small);
+    border-radius: var(--border-radius-default);
 
     font: inherit;
     font-size: 0.9375rem;