fix: preserve input type trigger layout

web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx

@@ -26,6 +26,7 @@ describe('InputTypeSelectField', () => {
     expect(screen.getByText('Input type')).toBeInTheDocument()
     expect(screen.getByText('appDebug.variableConfig.text-input')).toBeInTheDocument()
     expect(container.querySelector('[role="combobox"] span > div')).not.toBeInTheDocument()
+    expect(container.querySelector('[role="combobox"] > span > span')).toHaveClass('flex', 'min-w-0', 'items-center', 'gap-x-0.5')
   })
 
   it('should update value when users choose another input type', async () => {

web/app/components/base/form/components/field/input-type-select/__tests__/trigger.spec.tsx

@@ -24,4 +24,19 @@ describe('InputTypeSelect Trigger', () => {
     expect(screen.getByText('Text Input')).toBeInTheDocument()
     expect(screen.getByText('string')).toBeInTheDocument()
   })
+
+  it('should keep selected option parts in one inline flex row', () => {
+    render(
+      <Trigger
+        option={{
+          value: 'text-input',
+          label: 'Text Input',
+          Icon: MockIcon,
+          type: 'string',
+        }}
+      />,
+    )
+
+    expect(screen.getByText('Text Input').parentElement).toHaveClass('flex', 'min-w-0', 'items-center', 'gap-x-0.5')
+  })
 })

web/app/components/base/form/components/field/input-type-select/trigger.tsx

@@ -15,13 +15,13 @@ const Trigger = ({
     return <span className="grow p-1">{t('placeholder.select', { ns: 'common' })}</span>
 
   return (
-    <>
+    <span className="flex min-w-0 items-center gap-x-0.5">
       <option.Icon className="h-4 w-4 shrink-0 text-text-tertiary" />
       <span className="min-w-0 grow truncate p-1">{option.label}</span>
       <span className="relative inline-flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-[5px] system-xs-medium leading-3 whitespace-nowrap text-text-tertiary">
         {option.type}
       </span>
-    </>
+    </span>
   )
 }