fix style of Select COMBO Vue node widget (#5785)

## Summary

Fixed `WidgetSelect` component styling to match other Vue node widgets
by using shared base styles.

## Changes

- **What**: Replaced hardcoded color classes with `WidgetInputBaseClass`
for consistent styling across Vue node widgets

## Review Focus

Visual consistency with other input widgets in Vue nodes interface and
proper styling inheritance.

## Screenshots (if applicable)

*Before*:

<img width="1645" height="1436" alt="Screenshot from 2025-09-25
18-12-16"
src="https://github.com/user-attachments/assets/0b985616-0cf5-44e3-8459-739d194dec7a"
/>

*After*:

<img width="1645" height="1436" alt="Screenshot from 2025-09-25
18-12-07"
src="https://github.com/user-attachments/assets/235437cf-3e1f-4bc0-8822-26fb8606b437"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5785-fix-style-of-Select-COMBO-Vue-node-widget-27a6d73d3650811a959ef8a955274987)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Christian Byrne
2025-09-27 10:28:26 -07:00
committed by GitHub
parent 0ac1074a25
commit 4b9d448b6c
4 changed files with 3 additions and 1 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 107 KiB

View File

@@ -5,7 +5,7 @@
:options="selectOptions"
v-bind="combinedProps"
:disabled="readonly"
class="w-full text-xs bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] !rounded-lg"
:class="cn(WidgetInputBaseClass, 'w-full text-xs')"
size="small"
:pt="{
option: 'text-xs'
@@ -22,11 +22,13 @@ import { computed } from 'vue'
import { useWidgetValue } from '@/composables/graph/useWidgetValue'
import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
import { cn } from '@/utils/tailwindUtil'
import {
PANEL_EXCLUDED_PROPS,
filterWidgetProps
} from '@/utils/widgetPropFilter'
import { WidgetInputBaseClass } from './layout'
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
const props = defineProps<{