From 438a2bf9015e56e6edf28735d83b2fa86ae5b8c9 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Fri, 1 May 2026 11:26:33 +0300
Subject: [PATCH] fix(app): clarify layout spacing icons

---
 .../properties/LayoutSection/FlexControls.vue | 36 +++++++++++++++----
 .../LayoutSection/PaddingControls.vue         |  4 +--
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/components/properties/LayoutSection/FlexControls.vue b/src/components/properties/LayoutSection/FlexControls.vue
index 0eb38493b..5442f38b4 100644
--- a/src/components/properties/LayoutSection/FlexControls.vue
+++ b/src/components/properties/LayoutSection/FlexControls.vue
@@ -60,23 +60,37 @@ function isAlignmentActive(primary: LayoutAlign, counter: string) {
       <ScrubInput
         data-test-id="layout-gap-input"
         class="min-w-0 flex-1"
-        :icon="ctx.node.layoutMode === 'VERTICAL' ? '↕' : '↔'"
         :label="ctx.node.layoutMode === 'VERTICAL' ? panels.verticalGap : panels.horizontalGap"
         :model-value="Math.round(ctx.node.itemSpacing)"
         :min="0"
         @update:model-value="ctx.updateProp('itemSpacing', $event)"
         @commit="(v: number, p: number) => ctx.commitProp('itemSpacing', v, p)"
-      />
+      >
+        <template #icon>
+          <icon-lucide-align-vertical-space-between
+            v-if="ctx.node.layoutMode === 'VERTICAL'"
+            class="size-3.5"
+          />
+          <icon-lucide-align-horizontal-space-between v-else class="size-3.5" />
+        </template>
+      </ScrubInput>
       <ScrubInput
         data-test-id="layout-cross-gap-input"
         class="min-w-0 flex-1"
-        :icon="ctx.node.layoutMode === 'VERTICAL' ? '↔' : '↕'"
         :label="ctx.node.layoutMode === 'VERTICAL' ? panels.horizontalGap : panels.verticalGap"
         :model-value="Math.round(ctx.node.counterAxisSpacing)"
         :min="0"
         @update:model-value="ctx.updateProp('counterAxisSpacing', $event)"
         @commit="(v: number, p: number) => ctx.commitProp('counterAxisSpacing', v, p)"
-      />
+      >
+        <template #icon>
+          <icon-lucide-align-horizontal-space-between
+            v-if="ctx.node.layoutMode === 'VERTICAL'"
+            class="size-3.5"
+          />
+          <icon-lucide-align-vertical-space-between v-else class="size-3.5" />
+        </template>
+      </ScrubInput>
     </template>
     <template v-else>
       <div
@@ -86,7 +100,11 @@ function isAlignmentActive(primary: LayoutAlign, counter: string) {
         class="group flex h-[26px] min-w-0 flex-1 items-center rounded border border-border bg-input focus-within:border-accent"
       >
         <span class="flex shrink-0 items-center justify-center self-stretch px-[5px] text-muted">
-          {{ ctx.node.layoutMode === 'VERTICAL' ? '↕' : '↔' }}
+          <icon-lucide-align-vertical-space-between
+            v-if="ctx.node.layoutMode === 'VERTICAL'"
+            class="size-3.5"
+          />
+          <icon-lucide-align-horizontal-space-between v-else class="size-3.5" />
         </span>
         <span class="flex-1 truncate text-xs text-surface">{{ panels.auto }}</span>
         <SelectRoot :model-value="'AUTO'" @update:model-value="setGapMode">
@@ -126,12 +144,18 @@ function isAlignmentActive(primary: LayoutAlign, counter: string) {
         <ScrubInput
           data-test-id="layout-gap-input"
           class="w-full"
-          :icon="ctx.node.layoutMode === 'VERTICAL' ? '↕' : '↔'"
           :model-value="Math.round(ctx.node.itemSpacing)"
           :min="0"
           @update:model-value="ctx.updateProp('itemSpacing', $event)"
           @commit="(v: number, p: number) => ctx.commitProp('itemSpacing', v, p)"
         >
+          <template #icon>
+            <icon-lucide-align-vertical-space-between
+              v-if="ctx.node.layoutMode === 'VERTICAL'"
+              class="size-3.5"
+            />
+            <icon-lucide-align-horizontal-space-between v-else class="size-3.5" />
+          </template>
           <template #suffix>
             <SelectRoot :model-value="'FIXED'" @update:model-value="setGapMode">
               <SelectTrigger
diff --git a/src/components/properties/LayoutSection/PaddingControls.vue b/src/components/properties/LayoutSection/PaddingControls.vue
index 2f6db6779..e833d7450 100644
--- a/src/components/properties/LayoutSection/PaddingControls.vue
+++ b/src/components/properties/LayoutSection/PaddingControls.vue
@@ -27,7 +27,7 @@ const paddingSides: Array<{ prop: PaddingProp; icon: string }> = [
       @commit="ctx.commitHorizontalPadding"
     >
       <template #icon>
-        <icon-lucide-panel-left-right-dashed class="size-3.5" />
+        <icon-lucide-separator-vertical class="size-3.5" />
       </template>
     </ScrubInput>
     <ScrubInput
@@ -38,7 +38,7 @@ const paddingSides: Array<{ prop: PaddingProp; icon: string }> = [
       @commit="ctx.commitVerticalPadding"
     >
       <template #icon>
-        <icon-lucide-panel-top-bottom-dashed class="size-3.5" />
+        <icon-lucide-separator-horizontal class="size-3.5" />
       </template>
     </ScrubInput>
   </div>