fix: Add dropdown size control to Select components and improve UI (#5290)

* feature: size adjust

* feature: design adjust

* fix: popover width, height added

* fix: li style override

* refactor: improve component readability and
  maintainability per PR feedback

  - Replace CardGridList component with
  createGridStyle utility function
  - Add runtime validation for grid column values
  - Remove !important usage in MultiSelect, use cn()
  function instead
  - Extract popover sizing logic into
  usePopoverSizing composable
  - Improve class string readability by splitting
  into logical groups
  - Use Tailwind size utilities (size-8, size-10)
  instead of separate width/height
  - Remove magic numbers in SearchBox, align with
  button sizes
  - Rename BaseWidgetLayout to BaseModalLayout for
  clarity
  - Enhance SearchBox click area to cover entire
  component
  - Refactor long class strings using cn() utility
  across components

* fix: BaseWidgetLayout => BaseModalLayout

* fix: CardGrid deleted

* fix: unused exported types

* Update test expectations [skip ci]

* chore: code review

* Update test expectations [skip ci]

* chore: restore screenshot

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/input/SearchBox.vue

@@ -6,7 +6,7 @@
       :placeholder="placeHolder || 'Search...'"
       type="text"
       unstyled
-      class="w-full p-0 border-none outline-hidden bg-transparent text-xs text-neutral dark-theme:text-white"
+      :class="inputStyle"
     />
   </div>
 </template>
@@ -15,20 +15,56 @@
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
-const { placeHolder, showBorder = false } = defineProps<{
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  placeHolder,
+  showBorder = false,
+  size = 'md'
+} = defineProps<{
   placeHolder?: string
   showBorder?: boolean
+  size?: 'md' | 'lg'
 }>()
 // defineModel without arguments uses 'modelValue' as the prop name
 const searchQuery = defineModel<string>()
 
 const wrapperStyle = computed(() => {
-  return showBorder
-    ? 'flex w-full items-center rounded gap-2 bg-white dark-theme:bg-zinc-800 p-1 border border-solid border-zinc-200 dark-theme:border-zinc-700'
-    : 'flex w-full items-center rounded px-2 py-1.5 gap-2 bg-white dark-theme:bg-zinc-800'
+  const baseClasses = [
+    'relative flex w-full items-center gap-2',
+    'bg-white dark-theme:bg-zinc-800',
+    'cursor-text'
+  ]
+
+  if (showBorder) {
+    return cn(
+      ...baseClasses,
+      'rounded p-2',
+      'border border-solid',
+      'border-zinc-200 dark-theme:border-zinc-700'
+    )
+  }
+
+  // Size-specific classes matching button sizes for consistency
+  const sizeClasses = {
+    md: 'h-8 px-2 py-1.5', // Matches button sm size
+    lg: 'h-10 px-4 py-2' // Matches button md size
+  }[size]
+
+  return cn(...baseClasses, 'rounded-lg', sizeClasses)
+})
+
+const inputStyle = computed(() => {
+  return cn(
+    'absolute inset-0 w-full h-full pl-11',
+    'border-none outline-none bg-transparent',
+    'text-sm text-neutral dark-theme:text-white'
+  )
 })
 
 const iconColorStyle = computed(() => {
-  return !showBorder ? 'text-neutral' : 'text-zinc-300 dark-theme:text-zinc-700'
+  return cn(
+    !showBorder ? 'text-neutral' : ['text-zinc-300', 'dark-theme:text-zinc-700']
+  )
 })
 </script>