From 467a2e1dc106b4af953da5a8f53c4981ecbcdb8f Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 6 Apr 2026 18:06:24 +0300
Subject: [PATCH] Unify size input with inline sizing dropdown

Replace the separate ScrubInput + AppSelect pair with a single
combined control: the sizing mode (Hug/Fill) shows as an inline
label inside the scrub input, swapping to a chevron on hover.

- ScrubInput: add group class and #suffix slot (stays generic)
- LayoutSection: embed reka-ui Select in the suffix slot with
  group-hover toggle between label and chevron
---
 src/components/ScrubInput.vue               |   8 +-
 src/components/properties/LayoutSection.vue | 136 +++++++++++++++-----
 2 files changed, 110 insertions(+), 34 deletions(-)

diff --git a/src/components/ScrubInput.vue b/src/components/ScrubInput.vue
index 6a1a40806..708359642 100644
--- a/src/components/ScrubInput.vue
+++ b/src/components/ScrubInput.vue
@@ -33,7 +33,7 @@ const emit = defineEmits<{
   >
     <div
       data-test-id="scrub-input"
-      class="flex h-[26px] min-w-0 flex-1 items-center rounded border border-border bg-input focus-within:border-accent"
+      class="group flex h-[26px] min-w-0 flex-1 items-center rounded border border-border bg-input focus-within:border-accent"
       :style="{ cursor: editing ? 'auto' : 'ew-resize' }"
       @pointerdown="!editing && startScrub($event)"
     >
@@ -53,14 +53,16 @@ const emit = defineEmits<{
         :step="step"
       />
       <ScrubInputDisplay
-        class="flex flex-1 items-center truncate overflow-hidden pr-1.5 text-xs select-none"
+        class="flex flex-1 items-center truncate overflow-hidden text-xs select-none"
+        :class="$slots.suffix ? 'pr-0' : 'pr-1.5'"
       >
         <template #default="{ value, isMixed: mixed }">
           <span v-if="mixed" class="flex-1 text-muted">{{ ph }}</span>
           <template v-else>
             <span class="flex-1 text-surface">{{ value }}</span>
-            <span v-if="suffix" class="shrink-0 text-muted">{{ suffix }}</span>
+            <span v-if="suffix" class="shrink-0 pr-1.5 text-muted">{{ suffix }}</span>
           </template>
+          <slot name="suffix" />
         </template>
       </ScrubInputDisplay>
     </div>
diff --git a/src/components/properties/LayoutSection.vue b/src/components/properties/LayoutSection.vue
index 005b8a4a3..d06f95d06 100644
--- a/src/components/properties/LayoutSection.vue
+++ b/src/components/properties/LayoutSection.vue
@@ -1,12 +1,34 @@
 <script setup lang="ts">
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectViewport
+} from 'reka-ui'
+
 import { LayoutControlsRoot, useI18n } from '@open-pencil/vue'
 
 import AppSelect from '@/components/ui/AppSelect.vue'
 import ScrubInput from '@/components/ScrubInput.vue'
 import Tip from '@/components/ui/Tip.vue'
+import { selectContent, selectItem } from '@/components/ui/select'
 import { sectionWrapper } from '@/components/ui/section'
 
+import type { LayoutSizing } from '@open-pencil/core'
+
 const { panels } = useI18n()
+
+const CONTAINER_TYPES = ['FRAME', 'COMPONENT', 'COMPONENT_SET', 'INSTANCE']
+
+function sizingShortLabel(sizing: LayoutSizing): string | null {
+  if (sizing === 'HUG') return panels.value.sizingHug
+  if (sizing === 'FILL') return panels.value.sizingFill
+  return null
+}
 </script>
 
 <template>
@@ -15,40 +37,92 @@ const { panels } = useI18n()
       <div data-test-id="layout-section" :class="sectionWrapper()">
         <label class="mb-1.5 block text-[11px] text-muted">{{ panels.layout }}</label>
         <div class="flex gap-1.5">
-          <div class="flex min-w-0 flex-1 items-center gap-1">
-            <ScrubInput
-              icon="W"
-              :model-value="Math.round(ctx.node.width)"
-              :min="0"
-              @update:model-value="ctx.updateProp('width', $event)"
-              @commit="(v: number, p: number) => ctx.commitProp('width', v, p)"
-            />
-            <AppSelect
-              v-if="ctx.isFlex || ctx.isInAutoLayout"
-              :model-value="ctx.widthSizing"
-              :options="ctx.widthSizingOptions"
-              @update:model-value="ctx.setWidthSizing"
-            />
-          </div>
-          <div class="flex min-w-0 flex-1 items-center gap-1">
-            <ScrubInput
-              icon="H"
-              :model-value="Math.round(ctx.node.height)"
-              :min="0"
-              @update:model-value="ctx.updateProp('height', $event)"
-              @commit="(v: number, p: number) => ctx.commitProp('height', v, p)"
-            />
-            <AppSelect
-              v-if="ctx.isFlex || ctx.isInAutoLayout"
-              :model-value="ctx.heightSizing"
-              :options="ctx.heightSizingOptions"
-              @update:model-value="ctx.setHeightSizing"
-            />
-          </div>
+          <ScrubInput
+            icon="W"
+            :model-value="Math.round(ctx.node.width)"
+            :min="0"
+            @update:model-value="ctx.updateProp('width', $event)"
+            @commit="(v: number, p: number) => ctx.commitProp('width', v, p)"
+          >
+            <template v-if="ctx.isFlex || ctx.isInAutoLayout" #suffix>
+              <SelectRoot
+                :model-value="ctx.widthSizing"
+                @update:model-value="ctx.setWidthSizing($event as LayoutSizing)"
+              >
+                <SelectTrigger
+                  class="flex shrink-0 cursor-pointer items-center self-stretch border-none bg-transparent px-1 text-[11px] text-muted outline-none"
+                  @pointerdown.stop
+                >
+                  <span class="group-hover:hidden">{{ sizingShortLabel(ctx.widthSizing) }}</span>
+                  <icon-lucide-chevron-down class="hidden size-3 group-hover:block" />
+                </SelectTrigger>
+                <SelectPortal>
+                  <SelectContent position="popper" align="start" :side-offset="2" :class="selectContent()">
+                    <SelectViewport class="p-0.5">
+                      <SelectItem
+                        v-for="opt in ctx.widthSizingOptions"
+                        :key="opt.value"
+                        :value="opt.value"
+                        :class="selectItem({ class: 'rounded py-1.5 pr-2 pl-6 text-xs' })"
+                      >
+                        <SelectItemIndicator
+                          class="absolute left-1.5 inline-flex items-center justify-center"
+                        >
+                          <icon-lucide-check class="size-3 text-accent" />
+                        </SelectItemIndicator>
+                        <SelectItemText>{{ opt.label }}</SelectItemText>
+                      </SelectItem>
+                    </SelectViewport>
+                  </SelectContent>
+                </SelectPortal>
+              </SelectRoot>
+            </template>
+          </ScrubInput>
+          <ScrubInput
+            icon="H"
+            :model-value="Math.round(ctx.node.height)"
+            :min="0"
+            @update:model-value="ctx.updateProp('height', $event)"
+            @commit="(v: number, p: number) => ctx.commitProp('height', v, p)"
+          >
+            <template v-if="ctx.isFlex || ctx.isInAutoLayout" #suffix>
+              <SelectRoot
+                :model-value="ctx.heightSizing"
+                @update:model-value="ctx.setHeightSizing($event as LayoutSizing)"
+              >
+                <SelectTrigger
+                  class="flex shrink-0 cursor-pointer items-center self-stretch border-none bg-transparent px-1 text-[11px] text-muted outline-none"
+                  @pointerdown.stop
+                >
+                  <span class="group-hover:hidden">{{ sizingShortLabel(ctx.heightSizing) }}</span>
+                  <icon-lucide-chevron-down class="hidden size-3 group-hover:block" />
+                </SelectTrigger>
+                <SelectPortal>
+                  <SelectContent position="popper" align="start" :side-offset="2" :class="selectContent()">
+                    <SelectViewport class="p-0.5">
+                      <SelectItem
+                        v-for="opt in ctx.heightSizingOptions"
+                        :key="opt.value"
+                        :value="opt.value"
+                        :class="selectItem({ class: 'rounded py-1.5 pr-2 pl-6 text-xs' })"
+                      >
+                        <SelectItemIndicator
+                          class="absolute left-1.5 inline-flex items-center justify-center"
+                        >
+                          <icon-lucide-check class="size-3 text-accent" />
+                        </SelectItemIndicator>
+                        <SelectItemText>{{ opt.label }}</SelectItemText>
+                      </SelectItem>
+                    </SelectViewport>
+                  </SelectContent>
+                </SelectPortal>
+              </SelectRoot>
+            </template>
+          </ScrubInput>
         </div>
       </div>
 
-      <template v-if="['FRAME', 'COMPONENT', 'COMPONENT_SET', 'INSTANCE'].includes(ctx.node.type)">
+      <template v-if="CONTAINER_TYPES.includes(ctx.node.type)">
         <div :class="sectionWrapper()">
           <div class="flex items-center justify-between">
             <label class="mb-1.5 block text-[11px] text-muted">{{ panels.autoLayout }}</label>