From fc5cc2d4b8c60495fbb4e8a9dc3e2d935d8ad7ab Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sat, 18 Jul 2026 04:35:52 +0300
Subject: [PATCH] fix(app): align variable-enabled panel fields

- Keep Apply variable actions visible with restrained hover treatment
- Preserve the shared 26px NumberField height in column layouts
- Anchor variable pickers to their trigger instead of the zero-size contents wrapper
- Cover control dimensions, action visibility, and popover placement end to end
---
 CHANGELOG.md                                  |  1 +
 .../binding/VariableBindingPicker.vue         |  2 +-
 src/theme/binding-field.ts                    | 10 ++---
 src/theme/number-field.ts                     |  2 +-
 tests/e2e/properties/panel.spec.ts            | 37 +++++++++++++++++++
 5 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 96cc61546..bc7d9592b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 - Add saved per-node export settings for repeat exports.
 - Add Design panel controls for layer blend modes and alpha, vector, and luminance masks.
 - Refine Design panel foundations with 26px controls, consistently aligned action rails, shared Tailwind themes, and Storybook component states.
+- Fix variable binding action visibility, picker anchoring, hover treatment, and Design panel number-field heights.
 - Scale the Layers panel to 5,000-node documents with virtualized rows, indexed updates, scroll-to-selection, range selection, and focus-aware themed states.
 - Add Figma-style horizontal and vertical constraint controls with pin interactions, mixed-selection editing, undo, and responsive frame resizing.
 - Add mixed-selection stroke cap, join, and miter-limit controls with CanvasKit rendering and `.fig` roundtrip support.
diff --git a/src/components/properties/binding/VariableBindingPicker.vue b/src/components/properties/binding/VariableBindingPicker.vue
index 861f9ed38..62c93e514 100644
--- a/src/components/properties/binding/VariableBindingPicker.vue
+++ b/src/components/properties/binding/VariableBindingPicker.vue
@@ -99,7 +99,7 @@ defineOptions({ inheritAttrs: false })
 
 <template>
   <BindableValuePicker v-slot="picker">
-    <ComboboxAnchor class="contents" data-slot="anchor">
+    <ComboboxAnchor class="inline-flex shrink-0 items-center" data-slot="anchor">
       <Tip :label="triggerLabel">
         <ComboboxTrigger as-child>
           <BindingTrigger
diff --git a/src/theme/binding-field.ts b/src/theme/binding-field.ts
index 10f39abe9..4819c4d6a 100644
--- a/src/theme/binding-field.ts
+++ b/src/theme/binding-field.ts
@@ -1,14 +1,10 @@
-import { panelIconButtonBase } from './panel/field'
-
 const bindingFieldTheme = {
   slots: {
-    root: 'group/binding min-w-0',
+    root: 'min-w-0',
     pill: 'flex min-w-0 flex-1 items-center overflow-hidden rounded-sm px-1 text-component outline-none',
     pillLabel: 'min-w-0 flex-1 truncate text-[11px] font-medium',
-    trigger: [
-      panelIconButtonBase,
-      'size-5 rounded-sm transition-opacity data-[state=unbound]:opacity-0 data-[state=mixed]:opacity-0 group-hover/binding:opacity-100 group-focus-within/binding:opacity-100 data-[open]:bg-hover data-[open]:text-component disabled:opacity-0 data-[disabled]:opacity-0'
-    ],
+    trigger:
+      'flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-transparent bg-transparent text-muted outline-none transition-colors hover:text-surface focus-visible:border-panel-focus data-[open]:bg-hover data-[open]:text-component disabled:opacity-0 data-[disabled]:opacity-0',
     pickerContent:
       'z-[100] w-56 overflow-hidden rounded-lg border border-border bg-panel text-surface shadow-xl',
     pickerSearch:
diff --git a/src/theme/number-field.ts b/src/theme/number-field.ts
index d5f292fb4..97d6e1ec0 100644
--- a/src/theme/number-field.ts
+++ b/src/theme/number-field.ts
@@ -4,7 +4,7 @@ const numberFieldTheme = {
   slots: {
     root: [
       panelFieldBase,
-      'group flex flex-1 cursor-ew-resize items-center tabular-nums data-[disabled]:cursor-auto data-[editing]:cursor-auto'
+      'group flex flex-auto cursor-ew-resize items-center tabular-nums data-[disabled]:cursor-auto data-[editing]:cursor-auto'
     ],
     leading:
       'flex shrink-0 items-center justify-center self-stretch px-[5px] text-muted select-none [&>*]:pointer-events-none',
diff --git a/tests/e2e/properties/panel.spec.ts b/tests/e2e/properties/panel.spec.ts
index 28f012a00..8f840b195 100644
--- a/tests/e2e/properties/panel.spec.ts
+++ b/tests/e2e/properties/panel.spec.ts
@@ -20,6 +20,43 @@ test('property sections collapse and reopen from their title', async () => {
   await expect(blendMode).toBeVisible()
 })
 
+test('appearance fields share control height and show variable actions', async () => {
+  await editor.canvas.clearCanvas()
+  await editor.canvas.drawRect(200, 200, 80, 80)
+
+  const section = propertySection(editor.page, 'Appearance')
+  const controls = [
+    section.getByRole('combobox', { name: 'Blend mode' }),
+    section.getByRole('spinbutton', { name: 'Opacity' }),
+    section.getByRole('spinbutton', { name: 'Radius' }),
+    section.getByRole('spinbutton', { name: 'Corner smoothing' })
+  ]
+  for (const control of controls) {
+    await expect(control).toHaveCSS('height', '26px')
+  }
+
+  const applyVariable = section.getByRole('button', { name: 'Apply variable' }).first()
+  await expect(applyVariable).toBeVisible()
+  await expect(applyVariable).toHaveCSS('opacity', '1')
+  await expect(applyVariable).toHaveCSS('width', '20px')
+  await expect(applyVariable).toHaveCSS('height', '20px')
+
+  await applyVariable.hover()
+  await expect(applyVariable).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+
+  await applyVariable.click()
+  const search = editor.page.getByPlaceholder('Search')
+  const picker = editor.page.locator('[data-slot=content]').filter({ has: search })
+  await expect(picker).toBeVisible()
+  const triggerBox = expectDefined(await applyVariable.boundingBox(), 'variable trigger bounds')
+  const pickerBox = expectDefined(await picker.boundingBox(), 'variable picker bounds')
+  expect(pickerBox.x + pickerBox.width).toBeLessThan(triggerBox.x)
+  expect(
+    Math.abs(pickerBox.y + pickerBox.height / 2 - (triggerBox.y + triggerBox.height / 2))
+  ).toBeLessThan(4)
+  await search.press('Escape')
+})
+
 test('NumberField drag changes X position', async () => {
   await editor.canvas.clearCanvas()
   await editor.canvas.drawRect(100, 100, 80, 80)