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/utils/gridUtil.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties } from 'vue'
+
+interface GridOptions {
+  /** Minimum width for each grid item (default: 15rem) */
+  minWidth?: string
+  /** Maximum width for each grid item (default: 1fr) */
+  maxWidth?: string
+  /** Padding around the grid (default: 0) */
+  padding?: string
+  /** Gap between grid items (default: 1rem) */
+  gap?: string
+  /** Fixed number of columns (overrides auto-fill with minmax) */
+  columns?: number
+}
+
+/**
+ * Creates CSS grid styles for responsive grid layouts
+ * @param options Grid configuration options
+ * @returns CSS properties object for grid styling
+ */
+export function createGridStyle(options: GridOptions = {}): CSSProperties {
+  const {
+    minWidth = '15rem',
+    maxWidth = '1fr',
+    padding = '0',
+    gap = '1rem',
+    columns
+  } = options
+
+  // Runtime validation for columns
+  if (columns !== undefined && columns < 1) {
+    console.warn('createGridStyle: columns must be >= 1, defaulting to 1')
+  }
+
+  const gridTemplateColumns = columns
+    ? `repeat(${Math.max(1, columns ?? 1)}, 1fr)`
+    : `repeat(auto-fill, minmax(${minWidth}, ${maxWidth}))`
+
+  return {
+    display: 'grid',
+    gridTemplateColumns,
+    padding,
+    gap
+  }
+}