From e70ddea6849a7c6c4b505a6169819884c79aaa0c Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Thu, 11 Sep 2025 19:01:06 +0900
Subject: [PATCH] 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>
---
 .storybook/preview-head.html                  |   7 +-
 src/components/button/IconButton.vue          |   5 +-
 src/components/button/IconGroup.vue           |  16 +-
 src/components/button/IconTextButton.vue      |   5 +-
 src/components/button/MoreButton.vue          |  17 +-
 src/components/button/TextButton.vue          |   5 +-
 src/components/card/Card.stories.ts           | 289 +-----------------
 src/components/card/CardContainer.vue         |  19 +-
 src/components/card/CardGridList.stories.ts   |  69 +++++
 src/components/input/MultiSelect.stories.ts   | 152 +++++++++
 src/components/input/MultiSelect.vue          |  68 +++--
 src/components/input/SearchBox.stories.ts     |  32 +-
 src/components/input/SearchBox.vue            |  48 ++-
 src/components/input/SingleSelect.stories.ts  | 134 +++++++-
 src/components/input/SingleSelect.vue         |  64 ++--
 src/components/widget/SampleModelSelector.vue |  26 +-
 ....stories.ts => BaseModalLayout.stories.ts} |  32 +-
 ...seWidgetLayout.vue => BaseModalLayout.vue} |  77 +++--
 src/components/widget/nav/NavItem.vue         |   2 +-
 src/components/widget/nav/NavTitle.vue        |   2 +-
 src/composables/usePopoverSizing.ts           |  30 ++
 src/types/buttonTypes.ts                      |   4 +-
 src/utils/gridUtil.ts                         |  45 +++
 23 files changed, 722 insertions(+), 426 deletions(-)
 create mode 100644 src/components/card/CardGridList.stories.ts
 rename src/components/widget/layout/{BaseWidget.stories.ts => BaseModalLayout.stories.ts} (95%)
 rename src/components/widget/layout/{BaseWidgetLayout.vue => BaseModalLayout.vue} (72%)
 create mode 100644 src/composables/usePopoverSizing.ts
 create mode 100644 src/utils/gridUtil.ts

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 76aca2401..05e082ef0 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -57,9 +57,8 @@
 
   /* Override Storybook's problematic & selector styles */
   /* Reset only the specific properties that Storybook injects */
-  #storybook-root li+li,
-  #storybook-docs li+li {
-    margin: inherit;
-    padding: inherit;
+  li+li {
+    margin: 0;
+    padding: revert-layer;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/button/IconButton.vue b/src/components/button/IconButton.vue
index 1038a82e4..5de7adfcd 100644
--- a/src/components/button/IconButton.vue
+++ b/src/components/button/IconButton.vue
@@ -21,6 +21,7 @@ import {
   getButtonTypeClasses,
   getIconButtonSizeClasses
 } from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 interface IconButtonProps extends BaseButtonProps {
   onClick: (event: Event) => void
@@ -46,8 +47,6 @@ const buttonStyle = computed(() => {
     ? getBorderButtonTypeClasses(type)
     : getButtonTypeClasses(type)
 
-  return [baseClasses, sizeClasses, typeClasses, className]
-    .filter(Boolean)
-    .join(' ')
+  return cn(baseClasses, sizeClasses, typeClasses, className)
 })
 </script>
diff --git a/src/components/button/IconGroup.vue b/src/components/button/IconGroup.vue
index 784a945eb..9c5bbd40c 100644
--- a/src/components/button/IconGroup.vue
+++ b/src/components/button/IconGroup.vue
@@ -1,7 +1,17 @@
 <template>
-  <div
-    class="flex justify-center items-center shrink-0 outline-hidden border-none p-0 bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white rounded-lg cursor-pointer"
-  >
+  <div :class="iconGroupClasses">
     <slot></slot>
   </div>
 </template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+
+const iconGroupClasses = cn(
+  'flex justify-center items-center shrink-0',
+  'outline-hidden border-none p-0 rounded-lg',
+  'bg-white dark-theme:bg-zinc-700',
+  'text-neutral-950 dark-theme:text-white',
+  'cursor-pointer'
+)
+</script>
diff --git a/src/components/button/IconTextButton.vue b/src/components/button/IconTextButton.vue
index bdf40d4ed..a62aab08b 100644
--- a/src/components/button/IconTextButton.vue
+++ b/src/components/button/IconTextButton.vue
@@ -23,6 +23,7 @@ import {
   getButtonSizeClasses,
   getButtonTypeClasses
 } from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 defineOptions({
   inheritAttrs: false
@@ -52,8 +53,6 @@ const buttonStyle = computed(() => {
     ? getBorderButtonTypeClasses(type)
     : getButtonTypeClasses(type)
 
-  return [baseClasses, sizeClasses, typeClasses, className]
-    .filter(Boolean)
-    .join(' ')
+  return cn(baseClasses, sizeClasses, typeClasses, className)
 })
 </script>
diff --git a/src/components/button/MoreButton.vue b/src/components/button/MoreButton.vue
index 5f4f81607..0ea645c7b 100644
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -14,7 +14,7 @@
       unstyled
       :pt="pt"
     >
-      <div class="flex flex-col gap-1 p-2 min-w-40">
+      <div class="flex flex-col gap-2 p-2 min-w-40">
         <slot :close="hide" />
       </div>
     </Popover>
@@ -25,6 +25,8 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
+import { cn } from '@/utils/tailwindUtil'
+
 import IconButton from './IconButton.vue'
 
 const popover = ref<InstanceType<typeof Popover>>()
@@ -39,13 +41,16 @@ const hide = () => {
 
 const pt = computed(() => ({
   root: {
-    class: 'absolute z-50'
+    class: cn('absolute z-50')
   },
   content: {
-    class: [
-      'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
-    ]
+    class: cn(
+      'mt-2 rounded-lg',
+      'bg-white dark-theme:bg-zinc-800',
+      'text-neutral dark-theme:text-white',
+      'shadow-lg',
+      'border border-zinc-200 dark-theme:border-zinc-700'
+    )
   }
 }))
 </script>
diff --git a/src/components/button/TextButton.vue b/src/components/button/TextButton.vue
index 14d32cc73..4dbe53b9c 100644
--- a/src/components/button/TextButton.vue
+++ b/src/components/button/TextButton.vue
@@ -21,6 +21,7 @@ import {
   getButtonSizeClasses,
   getButtonTypeClasses
 } from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 interface TextButtonProps extends BaseButtonProps {
   label: string
@@ -48,8 +49,6 @@ const buttonStyle = computed(() => {
     ? getBorderButtonTypeClasses(type)
     : getButtonTypeClasses(type)
 
-  return [baseClasses, sizeClasses, typeClasses, className]
-    .filter(Boolean)
-    .join(' ')
+  return cn(baseClasses, sizeClasses, typeClasses, className)
 })
 </script>
diff --git a/src/components/card/Card.stories.ts b/src/components/card/Card.stories.ts
index 923327a79..f4252644e 100644
--- a/src/components/card/Card.stories.ts
+++ b/src/components/card/Card.stories.ts
@@ -49,14 +49,6 @@ const meta: Meta<CardStoryArgs> = {
       options: ['square', 'portrait', 'tallPortrait'],
       description: 'Card container aspect ratio'
     },
-    maxWidth: {
-      control: { type: 'range', min: 200, max: 600, step: 10 },
-      description: 'Maximum width in pixels'
-    },
-    minWidth: {
-      control: { type: 'range', min: 150, max: 400, step: 10 },
-      description: 'Minimum width in pixels'
-    },
     topRatio: {
       control: 'select',
       options: ['square', 'landscape'],
@@ -155,11 +147,10 @@ const createCardTemplate = (args: CardStoryArgs) => ({
     }
   },
   template: `
-    <div class="p-4 min-h-screen bg-zinc-50 dark-theme:bg-zinc-900">
+    <div class="min-h-screen">
       <CardContainer 
         :ratio="args.containerRatio" 
-        :max-width="args.maxWidth"
-        :min-width="args.minWidth"
+        class="max-w-[320px] mx-auto"
       >
         <template #top>
           <CardTop :ratio="args.topRatio">
@@ -214,7 +205,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
         </template>
         
         <template #bottom>
-          <CardBottom class="p-3">
+          <CardBottom class="p-3 bg-neutral-100">
             <CardTitle v-if="args.showTitle">{{ args.title }}</CardTitle>
             <CardDescription v-if="args.showDescription">{{ args.description }}</CardDescription>
           </CardBottom>
@@ -228,8 +219,6 @@ export const Default: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'portrait',
-    maxWidth: 300,
-    minWidth: 200,
     topRatio: 'square',
     showTopLeft: false,
     showTopRight: true,
@@ -255,8 +244,6 @@ export const SquareCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'square',
-    maxWidth: 400,
-    minWidth: 250,
     topRatio: 'landscape',
     showTopLeft: false,
     showTopRight: true,
@@ -282,8 +269,6 @@ export const TallPortraitCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'tallPortrait',
-    maxWidth: 280,
-    minWidth: 180,
     topRatio: 'square',
     showTopLeft: true,
     showTopRight: true,
@@ -309,8 +294,6 @@ export const ImageCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'portrait',
-    maxWidth: 350,
-    minWidth: 220,
     topRatio: 'square',
     showTopLeft: false,
     showTopRight: true,
@@ -335,8 +318,6 @@ export const MinimalCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'square',
-    maxWidth: 300,
-    minWidth: 200,
     topRatio: 'landscape',
     showTopLeft: false,
     showTopRight: false,
@@ -361,8 +342,6 @@ export const FullFeaturedCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'tallPortrait',
-    maxWidth: 320,
-    minWidth: 240,
     topRatio: 'square',
     showTopLeft: true,
     showTopRight: true,
@@ -376,270 +355,10 @@ export const FullFeaturedCard: Story = {
     backgroundColor: '#ef4444',
     showImage: false,
     imageUrl: '',
-    tags: ['Bundle', 'Premium', 'SDXL'],
+    tags: ['Bundle', 'SDXL'],
     showFileSize: true,
     fileSize: '5.4 GB',
     showFileType: true,
     fileType: 'pack'
   }
 }
-
-export const GridOfCards: Story = {
-  render: () => ({
-    components: {
-      CardContainer,
-      CardTop,
-      CardBottom,
-      CardTitle,
-      CardDescription,
-      IconButton,
-      SquareChip
-    },
-    setup() {
-      const cards = ref([
-        {
-          id: 1,
-          title: 'Realistic Vision',
-          description: 'Photorealistic model for portraits',
-          color: 'from-blue-400 to-blue-600',
-          ratio: 'portrait' as const,
-          tags: ['SD 1.5'],
-          size: '2.1 GB'
-        },
-        {
-          id: 2,
-          title: 'DreamShaper XL',
-          description: 'Artistic style model with enhanced details',
-          color: 'from-purple-400 to-pink-600',
-          ratio: 'portrait' as const,
-          tags: ['SDXL'],
-          size: '6.5 GB'
-        },
-        {
-          id: 3,
-          title: 'Anime LoRA',
-          description: 'Character style LoRA',
-          color: 'from-green-400 to-teal-600',
-          ratio: 'portrait' as const,
-          tags: ['LoRA'],
-          size: '144 MB'
-        },
-        {
-          id: 4,
-          title: 'VAE Model',
-          description: 'Enhanced color VAE',
-          color: 'from-orange-400 to-red-600',
-          ratio: 'portrait' as const,
-          tags: ['VAE'],
-          size: '335 MB'
-        },
-        {
-          id: 5,
-          title: 'Workflow Bundle',
-          description: 'Complete workflow setup',
-          color: 'from-indigo-400 to-blue-600',
-          ratio: 'portrait' as const,
-          tags: ['Workflow'],
-          size: '45 KB'
-        },
-        {
-          id: 6,
-          title: 'Embedding Pack',
-          description: 'Negative embeddings collection',
-          color: 'from-yellow-400 to-orange-600',
-          ratio: 'portrait' as const,
-          tags: ['Embedding'],
-          size: '2.3 MB'
-        }
-      ])
-
-      return { cards }
-    },
-    template: `
-      <div class="p-4 min-h-screen bg-zinc-50 dark-theme:bg-zinc-900">
-        <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Model Gallery</h3>
-        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
-          <CardContainer 
-            v-for="card in cards" 
-            :key="card.id"
-            :ratio="card.ratio"
-            :max-width="300"
-            :min-width="180"
-          >
-            <template #top>
-              <CardTop ratio="square">
-                <template #default>
-                  <div 
-                    class="w-full h-full bg-gray-600"
-                    :class="card.color"
-                  ></div>
-                </template>
-                
-                <template #top-right>
-                  <IconButton
-                    class="!bg-white/90 !text-neutral-900"
-                    @click="() => console.log('Info:', card.title)"
-                  >
-                    <i class="icon-[lucide--info] size-4" />
-                  </IconButton>
-                </template>
-                
-                <template #bottom-right>
-                  <SquareChip 
-                    v-for="tag in card.tags" 
-                    :key="tag" 
-                    :label="tag"
-                  >
-                    <template v-if="tag === 'LoRA'" #icon>
-                      <i class="icon-[lucide--folder] size-3" />
-                    </template>
-                  </SquareChip>
-                  <SquareChip :label="card.size" />
-                </template>
-              </CardTop>
-            </template>
-            
-            <template #bottom>
-              <CardBottom class="p-3">
-                <CardTitle>{{ card.title }}</CardTitle>
-                <CardDescription>{{ card.description }}</CardDescription>
-              </CardBottom>
-            </template>
-          </CardContainer>
-        </div>
-      </div>
-    `
-  })
-}
-
-export const ResponsiveGrid: Story = {
-  render: () => ({
-    components: {
-      CardContainer,
-      CardTop,
-      CardBottom,
-      CardTitle,
-      CardDescription,
-      SquareChip
-    },
-    setup() {
-      const generateCards = (
-        count: number,
-        ratio: 'square' | 'portrait' | 'tallPortrait'
-      ) => {
-        return Array.from({ length: count }, (_, i) => ({
-          id: i + 1,
-          title: `Model ${i + 1}`,
-          description: `Description for model ${i + 1}`,
-          ratio,
-          color: `hsl(${(i * 60) % 360}, 70%, 60%)`
-        }))
-      }
-
-      const squareCards = ref(generateCards(4, 'square'))
-      const portraitCards = ref(generateCards(6, 'portrait'))
-      const tallCards = ref(generateCards(5, 'tallPortrait'))
-
-      return {
-        squareCards,
-        portraitCards,
-        tallCards
-      }
-    },
-    template: `
-      <div class="p-4 space-y-8 min-h-screen bg-zinc-50 dark-theme:bg-zinc-900">
-        <div>
-          <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Square Cards (1:1)</h3>
-          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            <CardContainer 
-              v-for="card in squareCards" 
-              :key="card.id"
-              :ratio="card.ratio"
-              :max-width="400"
-              :min-width="200"
-            >
-              <template #top>
-                <CardTop ratio="landscape">
-                  <div 
-                    class="w-full h-full"
-                    :style="{ backgroundColor: card.color }"
-                  ></div>
-                </CardTop>
-              </template>
-              <template #bottom>
-                <CardBottom class="p-3">
-                  <CardTitle>{{ card.title }}</CardTitle>
-                  <CardDescription>{{ card.description }}</CardDescription>
-                </CardBottom>
-              </template>
-            </CardContainer>
-          </div>
-        </div>
-
-        <div>
-          <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Portrait Cards (2:3)</h3>
-          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-            <CardContainer 
-              v-for="card in portraitCards" 
-              :key="card.id"
-              :ratio="card.ratio"
-              :max-width="280"
-              :min-width="160"
-            >
-              <template #top>
-                <CardTop ratio="square">
-                  <div 
-                    class="w-full h-full"
-                    :style="{ backgroundColor: card.color }"
-                  ></div>
-                </CardTop>
-              </template>
-              <template #bottom>
-                <CardBottom class="p-2">
-                  <CardTitle>{{ card.title }}</CardTitle>
-                </CardBottom>
-              </template>
-            </CardContainer>
-          </div>
-        </div>
-
-        <div>
-          <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Tall Portrait Cards (2:4)</h3>
-          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-            <CardContainer 
-              v-for="card in tallCards" 
-              :key="card.id"
-              :ratio="card.ratio"
-              :max-width="260"
-              :min-width="150"
-            >
-              <template #top>
-                <CardTop ratio="square">
-                  <template #default>
-                    <div 
-                      class="w-full h-full"
-                      :style="{ backgroundColor: card.color }"
-                    ></div>
-                  </template>
-                  <template #bottom-right>
-                    <SquareChip :label="'#' + card.id" />
-                  </template>
-                </CardTop>
-              </template>
-              <template #bottom>
-                <CardBottom class="p-3">
-                  <CardTitle>{{ card.title }}</CardTitle>
-                  <CardDescription>{{ card.description }}</CardDescription>
-                </CardBottom>
-              </template>
-            </CardContainer>
-          </div>
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true }
-  }
-}
diff --git a/src/components/card/CardContainer.vue b/src/components/card/CardContainer.vue
index e3204ee51..1a17d5659 100644
--- a/src/components/card/CardContainer.vue
+++ b/src/components/card/CardContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="containerClasses" :style="containerStyle">
+  <div :class="containerClasses">
     <slot name="top"></slot>
     <slot name="bottom"></slot>
   </div>
@@ -8,13 +8,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const {
-  ratio = 'square',
-  maxWidth,
-  minWidth
-} = defineProps<{
-  maxWidth?: number
-  minWidth?: number
+const { ratio = 'square' } = defineProps<{
   ratio?: 'square' | 'portrait' | 'tallPortrait'
 }>()
 
@@ -30,13 +24,4 @@ const containerClasses = computed(() => {
 
   return `${baseClasses} ${ratioClasses[ratio]}`
 })
-
-const containerStyle = computed(() =>
-  maxWidth || minWidth
-    ? {
-        maxWidth: `${maxWidth}px`,
-        minWidth: `${minWidth}px`
-      }
-    : {}
-)
 </script>
diff --git a/src/components/card/CardGridList.stories.ts b/src/components/card/CardGridList.stories.ts
new file mode 100644
index 000000000..8ed61a691
--- /dev/null
+++ b/src/components/card/CardGridList.stories.ts
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { createGridStyle } from '@/utils/gridUtil'
+
+import CardBottom from './CardBottom.vue'
+import CardContainer from './CardContainer.vue'
+import CardTop from './CardTop.vue'
+
+const meta: Meta = {
+  title: 'Components/Card/CardGridList',
+  tags: ['autodocs'],
+  argTypes: {
+    minWidth: {
+      control: 'text',
+      description: 'Minimum width for each grid item'
+    },
+    maxWidth: {
+      control: 'text',
+      description: 'Maximum width for each grid item'
+    },
+    padding: {
+      control: 'text',
+      description: 'Padding around the grid'
+    },
+    gap: {
+      control: 'text',
+      description: 'Gap between grid items'
+    },
+    columns: {
+      control: 'number',
+      description: 'Fixed number of columns (overrides auto-fill)'
+    }
+  },
+  args: {
+    minWidth: '15rem',
+    maxWidth: '1fr',
+    padding: '0rem',
+    gap: '1rem'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { CardContainer, CardTop, CardBottom },
+    setup() {
+      const gridStyle = createGridStyle(args)
+      return { gridStyle }
+    },
+    template: `
+      <div :style="gridStyle">
+        <CardContainer v-for="i in 12" :key="i" ratio="square">
+          <template #top>
+            <CardTop ratio="landscape">
+              <template #default>
+                <div class="w-full h-full bg-blue-500"></div>
+              </template>
+            </CardTop>
+          </template>
+          <template #bottom>
+            <CardBottom class="bg-neutral-200"></CardBottom>
+          </template>
+        </CardContainer>
+      </div>
+    `
+  })
+}
diff --git a/src/components/input/MultiSelect.stories.ts b/src/components/input/MultiSelect.stories.ts
index e4b41d68f..1ae58db8e 100644
--- a/src/components/input/MultiSelect.stories.ts
+++ b/src/components/input/MultiSelect.stories.ts
@@ -13,6 +13,9 @@ interface ExtendedProps extends Partial<MultiSelectProps> {
   showSelectedCount?: boolean
   showClearButton?: boolean
   searchPlaceholder?: string
+  listMaxHeight?: string
+  popoverMinWidth?: string
+  popoverMaxWidth?: string
   // Override modelValue type to match our Option type
   modelValue?: Array<{ name: string; value: string }>
 }
@@ -42,6 +45,18 @@ const meta: Meta<ExtendedProps> = {
     },
     searchPlaceholder: {
       control: 'text'
+    },
+    listMaxHeight: {
+      control: 'text',
+      description: 'Maximum height of the dropdown list'
+    },
+    popoverMinWidth: {
+      control: 'text',
+      description: 'Minimum width of the popover'
+    },
+    popoverMaxWidth: {
+      control: 'text',
+      description: 'Maximum width of the popover'
     }
   },
   args: {
@@ -274,3 +289,140 @@ export const CustomSearchPlaceholder: Story = {
     searchPlaceholder: 'Filter packages...'
   }
 }
+
+export const CustomMaxHeight: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected1 = ref([])
+      const selected2 = ref([])
+      const selected3 = ref([])
+      const manyOptions = Array.from({ length: 20 }, (_, i) => ({
+        name: `Option ${i + 1}`,
+        value: `option${i + 1}`
+      }))
+      return { selected1, selected2, selected3, manyOptions }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Small Height (10rem)</h3>
+          <MultiSelect 
+            v-model="selected1" 
+            :options="manyOptions" 
+            label="Small Dropdown" 
+            list-max-height="10rem"
+            show-selected-count 
+          />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Default Height (28rem)</h3>
+          <MultiSelect 
+            v-model="selected2" 
+            :options="manyOptions" 
+            label="Default Dropdown"
+            list-max-height="28rem"
+            show-selected-count 
+          />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Large Height (32rem)</h3>
+          <MultiSelect 
+            v-model="selected3" 
+            :options="manyOptions" 
+            label="Large Dropdown" 
+            list-max-height="32rem"
+            show-selected-count 
+          />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
+
+export const CustomMinWidth: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected1 = ref([])
+      const selected2 = ref([])
+      const selected3 = ref([])
+      const options = [
+        { name: 'A', value: 'a' },
+        { name: 'B', value: 'b' },
+        { name: 'Very Long Option Name Here', value: 'long' }
+      ]
+      return { selected1, selected2, selected3, options }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
+          <MultiSelect v-model="selected1" :options="options" label="Auto" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min Width 18rem</h3>
+          <MultiSelect v-model="selected2" :options="options" label="Min 18rem" popover-min-width="18rem" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min Width 28rem</h3>
+          <MultiSelect v-model="selected3" :options="options" label="Min 28rem" popover-min-width="28rem" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
+
+export const CustomMaxWidth: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected1 = ref([])
+      const selected2 = ref([])
+      const selected3 = ref([])
+      const longOptions = [
+        { name: 'Short', value: 'short' },
+        {
+          name: 'This is a very long option name that would normally expand the dropdown',
+          value: 'long1'
+        },
+        {
+          name: 'Another extremely long option that demonstrates max-width constraint',
+          value: 'long2'
+        }
+      ]
+      return { selected1, selected2, selected3, longOptions }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
+          <MultiSelect v-model="selected1" :options="longOptions" label="Auto" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Max Width 18rem</h3>
+          <MultiSelect v-model="selected2" :options="longOptions" label="Max 18rem" popover-max-width="18rem" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min 12rem Max 22rem</h3>
+          <MultiSelect v-model="selected3" :options="longOptions" label="Min & Max" popover-min-width="12rem" popover-max-width="22rem" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index ffafde707..5ca6060a3 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -1,10 +1,9 @@
 <template>
-  <!-- 
+  <!--
     Note: Unlike SingleSelect, we don't need an explicit options prop because:
     1. Our value template only shows a static label (not dynamic based on selection)
     2. We display a count badge instead of actual selected labels
     3. All PrimeVue props (including options) are passed via v-bind="$attrs"
-    
     option-label="name" is required because our option template directly accesses option.name
     max-selected-labels="0" is required to show count badge instead of selected item labels
   -->
@@ -20,12 +19,13 @@
       v-if="showSearchBox || showSelectedCount || showClearButton"
       #header
     >
-      <div class="p-2 flex flex-col pb-0">
+      <div class="pt-2 pb-0 px-2 flex flex-col">
         <SearchBox
           v-if="showSearchBox"
           v-model="searchQuery"
           :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
           :show-order="true"
+          :show-border="true"
           :place-holder="searchPlaceholder"
         />
         <div
@@ -47,11 +47,11 @@
             :label="$t('g.clearAll')"
             type="transparent"
             size="fit-content"
-            class="text-sm text-blue-500! dark-theme:text-blue-600!"
+            class="text-sm text-blue-500 dark-theme:text-blue-600"
             @click.stop="selectedItems = []"
           />
         </div>
-        <div class="mt-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
+        <div class="my-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
       </div>
     </template>
 
@@ -75,13 +75,13 @@
 
     <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
     <template #option="slotProps">
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-2" :style="popoverStyle">
         <div
           class="flex h-4 w-4 p-0.5 shrink-0 items-center justify-center rounded transition-all duration-200"
           :class="
             slotProps.selected
-              ? 'border-[3px] border-blue-400 bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
-              : 'border-[1px] border-neutral-300 dark-theme:border-zinc-600 bg-neutral-100 dark-theme:bg-zinc-700'
+              ? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
+              : 'bg-neutral-100 dark-theme:bg-zinc-700'
           "
         >
           <i-lucide:check
@@ -89,9 +89,11 @@
             class="text-xs text-bold text-white"
           />
         </div>
-        <Button class="border-none outline-none bg-transparent" unstyled>{{
-          slotProps.option.name
-        }}</Button>
+        <Button
+          class="border-none outline-none bg-transparent text-left"
+          unstyled
+          >{{ slotProps.option.name }}</Button
+        >
       </div>
     </template>
   </MultiSelect>
@@ -105,6 +107,8 @@ import MultiSelect, {
 import { computed } from 'vue'
 
 import SearchBox from '@/components/input/SearchBox.vue'
+import { usePopoverSizing } from '@/composables/usePopoverSizing'
+import { cn } from '@/utils/tailwindUtil'
 
 import TextButton from '../button/TextButton.vue'
 
@@ -125,6 +129,12 @@ interface Props {
   showClearButton?: boolean
   /** Placeholder for the search input */
   searchPlaceholder?: string
+  /** Maximum height of the dropdown panel (default: 28rem) */
+  listMaxHeight?: string
+  /** Minimum width of the popover (default: auto) */
+  popoverMinWidth?: string
+  /** Maximum width of the popover (default: auto) */
+  popoverMaxWidth?: string
   // Note: options prop is intentionally omitted.
   // It's passed via $attrs to maximize PrimeVue API compatibility
 }
@@ -133,7 +143,10 @@ const {
   showSearchBox = false,
   showSelectedCount = false,
   showClearButton = false,
-  searchPlaceholder = 'Search...'
+  searchPlaceholder = 'Search...',
+  listMaxHeight = '28rem',
+  popoverMinWidth,
+  popoverMaxWidth
 } = defineProps<Props>()
 
 const selectedItems = defineModel<Option[]>({
@@ -142,10 +155,15 @@ const selectedItems = defineModel<Option[]>({
 const searchQuery = defineModel<string>('searchQuery')
 const selectedCount = computed(() => selectedItems.value.length)
 
+const popoverStyle = usePopoverSizing({
+  minWidth: popoverMinWidth,
+  maxWidth: popoverMaxWidth
+})
+
 const pt = computed(() => ({
   root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
     class: [
-      'relative inline-flex cursor-pointer select-none',
+      'h-10 relative inline-flex cursor-pointer select-none',
       'rounded-lg bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
       'transition-all duration-200 ease-in-out',
       'border-[2.5px] border-solid',
@@ -170,16 +188,26 @@ const pt = computed(() => ({
       showSearchBox || showSelectedCount || showClearButton ? 'block' : 'hidden'
   }),
   // Overlay & list visuals unchanged
-  overlay:
-    'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg border border-solid border-zinc-100 dark-theme:border-zinc-700',
+  overlay: {
+    class: cn(
+      'mt-2 rounded-lg py-2 px-2',
+      'bg-white dark-theme:bg-zinc-800',
+      'text-neutral dark-theme:text-white',
+      'border border-solid border-neutral-200 dark-theme:border-zinc-700'
+    )
+  },
+  listContainer: () => ({
+    style: { maxHeight: listMaxHeight },
+    class: 'overflow-y-auto scrollbar-hide'
+  }),
   list: {
-    class: 'flex flex-col gap-1 p-0 list-none border-none text-xs'
+    class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
   },
   // Option row hover and focus tone
   option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
     class: [
-      'flex gap-1 items-center p-2',
-      'hover:bg-neutral-100/50 hover:dark-theme:bg-zinc-700/50',
+      'flex gap-2 items-center h-10 px-2 rounded-lg',
+      'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
       // Add focus/highlight state for keyboard navigation
       {
         'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context?.focused
@@ -189,11 +217,11 @@ const pt = computed(() => ({
   // Hide built-in checkboxes entirely via PT (no :deep)
   pcHeaderCheckbox: {
     root: { class: 'hidden' },
-    style: 'display: none !important'
+    style: { display: 'none' }
   },
   pcOptionCheckbox: {
     root: { class: 'hidden' },
-    style: 'display: none !important'
+    style: { display: 'none' }
   }
 }))
 </script>
diff --git a/src/components/input/SearchBox.stories.ts b/src/components/input/SearchBox.stories.ts
index 769e3fbad..845a62059 100644
--- a/src/components/input/SearchBox.stories.ts
+++ b/src/components/input/SearchBox.stories.ts
@@ -14,11 +14,17 @@ const meta: Meta<typeof SearchBox> = {
     showBorder: {
       control: 'boolean',
       description: 'Toggle border prop'
+    },
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+      description: 'Size variant of the search box'
     }
   },
   args: {
     placeHolder: 'Search...',
-    showBorder: false
+    showBorder: false,
+    size: 'md'
   }
 }
 
@@ -53,3 +59,27 @@ export const NoBorder: Story = {
     showBorder: false
   }
 }
+
+export const MediumSize: Story = {
+  ...Default,
+  args: {
+    size: 'md',
+    showBorder: false
+  }
+}
+
+export const LargeSize: Story = {
+  ...Default,
+  args: {
+    size: 'lg',
+    showBorder: false
+  }
+}
+
+export const LargeSizeWithBorder: Story = {
+  ...Default,
+  args: {
+    size: 'lg',
+    showBorder: true
+  }
+}
diff --git a/src/components/input/SearchBox.vue b/src/components/input/SearchBox.vue
index 622fc6ff8..00d50cae2 100644
--- a/src/components/input/SearchBox.vue
+++ b/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>
diff --git a/src/components/input/SingleSelect.stories.ts b/src/components/input/SingleSelect.stories.ts
index a529a2fe1..b130780e2 100644
--- a/src/components/input/SingleSelect.stories.ts
+++ b/src/components/input/SingleSelect.stories.ts
@@ -10,7 +10,19 @@ const meta: Meta<typeof SingleSelect> = {
   tags: ['autodocs'],
   argTypes: {
     label: { control: 'text' },
-    options: { control: 'object' }
+    options: { control: 'object' },
+    listMaxHeight: {
+      control: 'text',
+      description: 'Maximum height of the dropdown list'
+    },
+    popoverMinWidth: {
+      control: 'text',
+      description: 'Minimum width of the popover'
+    },
+    popoverMaxWidth: {
+      control: 'text',
+      description: 'Maximum width of the popover'
+    }
   },
   args: {
     label: 'Sorting Type',
@@ -121,6 +133,124 @@ export const AllVariants: Story = {
   }),
   parameters: {
     controls: { disable: true },
-    actions: { disable: true }
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
+
+export const CustomMaxHeight: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | null>(null)
+      const manyOptions = Array.from({ length: 20 }, (_, i) => ({
+        name: `Option ${i + 1}`,
+        value: `option${i + 1}`
+      }))
+      return { selected, manyOptions }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Small Height (10rem)</h3>
+          <SingleSelect v-model="selected" :options="manyOptions" label="Small Dropdown" list-max-height="10rem" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Default Height (28rem)</h3>
+          <SingleSelect v-model="selected" :options="manyOptions" label="Default Dropdown" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Large Height (32rem)</h3>
+          <SingleSelect v-model="selected" :options="manyOptions" label="Large Dropdown" list-max-height="32rem" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
+
+export const CustomMinWidth: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected1 = ref<string | null>(null)
+      const selected2 = ref<string | null>(null)
+      const selected3 = ref<string | null>(null)
+      const options = [
+        { name: 'A', value: 'a' },
+        { name: 'B', value: 'b' },
+        { name: 'Very Long Option Name Here', value: 'long' }
+      ]
+      return { selected1, selected2, selected3, options }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
+          <SingleSelect v-model="selected1" :options="options" label="Auto" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min Width 15rem</h3>
+          <SingleSelect v-model="selected2" :options="options" label="Min 15rem" popover-min-width="15rem" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min Width 25rem</h3>
+          <SingleSelect v-model="selected3" :options="options" label="Min 25rem" popover-min-width="25rem" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
+  }
+}
+
+export const CustomMaxWidth: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected1 = ref<string | null>(null)
+      const selected2 = ref<string | null>(null)
+      const selected3 = ref<string | null>(null)
+      const longOptions = [
+        { name: 'Short', value: 'short' },
+        {
+          name: 'This is a very long option name that would normally expand the dropdown',
+          value: 'long1'
+        },
+        {
+          name: 'Another extremely long option that demonstrates max-width constraint',
+          value: 'long2'
+        }
+      ]
+      return { selected1, selected2, selected3, longOptions }
+    },
+    template: `
+      <div class="flex gap-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
+          <SingleSelect v-model="selected1" :options="longOptions" label="Auto" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Max Width 15rem</h3>
+          <SingleSelect v-model="selected2" :options="longOptions" label="Max 15rem" popover-max-width="15rem" />
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Min 10rem Max 20rem</h3>
+          <SingleSelect v-model="selected3" :options="longOptions" label="Min & Max" popover-min-width="10rem" popover-max-width="20rem" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    slot: { disable: true }
   }
 }
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index c46a28a7a..6335c6f10 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -1,10 +1,9 @@
 <template>
-  <!-- 
+  <!--
     Note: We explicitly pass options here (not just via $attrs) because:
     1. Our custom value template needs options to look up labels from values
     2. PrimeVue's value slot only provides 'value' and 'placeholder', not the selected item's label
     3. We need to maintain the icon slot functionality in the value template
-    
     option-label="name" is required because our option template directly accesses option.name
   -->
   <Select
@@ -18,7 +17,7 @@
   >
     <!-- Trigger value -->
     <template #value="slotProps">
-      <div class="flex items-center gap-2 text-sm">
+      <div class="flex items-center gap-2 text-sm text-neutral-500">
         <slot name="icon" />
         <span
           v-if="slotProps.value !== null && slotProps.value !== undefined"
@@ -34,18 +33,19 @@
 
     <!-- Trigger caret -->
     <template #dropdownicon>
-      <i-lucide:chevron-down
-        class="text-base text-neutral-400 dark-theme:text-gray-300"
-      />
+      <i-lucide:chevron-down class="text-base text-neutral-500" />
     </template>
 
     <!-- Option row -->
     <template #option="{ option, selected }">
-      <div class="flex items-center justify-between gap-3 w-full">
+      <div
+        class="flex items-center justify-between gap-3 w-full"
+        :style="optionStyle"
+      >
         <span class="truncate">{{ option.name }}</span>
         <i-lucide:check
           v-if="selected"
-          class="text-neutral-900 dark-theme:text-white"
+          class="text-neutral-600 dark-theme:text-white"
         />
       </div>
     </template>
@@ -56,11 +56,19 @@
 import Select, { SelectPassThroughMethodOptions } from 'primevue/select'
 import { computed } from 'vue'
 
+import { cn } from '@/utils/tailwindUtil'
+
 defineOptions({
   inheritAttrs: false
 })
 
-const { label, options } = defineProps<{
+const {
+  label,
+  options,
+  listMaxHeight = '28rem',
+  popoverMinWidth,
+  popoverMaxWidth
+} = defineProps<{
   label?: string
   /**
    * Required for displaying the selected item's label.
@@ -71,6 +79,12 @@ const { label, options } = defineProps<{
     name: string
     value: string
   }[]
+  /** Maximum height of the dropdown panel (default: 28rem) */
+  listMaxHeight?: string
+  /** Minimum width of the popover (default: auto) */
+  popoverMinWidth?: string
+  /** Maximum width of the popover (default: auto) */
+  popoverMaxWidth?: string
 }>()
 
 const selectedItem = defineModel<string | null>({ required: true })
@@ -87,6 +101,17 @@ const getLabel = (val: string | null | undefined) => {
   return found ? found.name : label ?? ''
 }
 
+// Extract complex style logic from template
+const optionStyle = computed(() => {
+  if (!popoverMinWidth && !popoverMaxWidth) return undefined
+
+  const styles: string[] = []
+  if (popoverMinWidth) styles.push(`min-width: ${popoverMinWidth}`)
+  if (popoverMaxWidth) styles.push(`max-width: ${popoverMaxWidth}`)
+
+  return styles.join('; ')
+})
+
 /**
  * Unstyled + PT API only
  * - No background/border (same as page background)
@@ -98,7 +123,7 @@ const pt = computed(() => ({
   }: SelectPassThroughMethodOptions<{ name: string; value: string }>) => ({
     class: [
       // container
-      'relative inline-flex cursor-pointer select-none items-center',
+      'h-10 relative inline-flex cursor-pointer select-none items-center',
       // trigger surface
       'rounded-md',
       'bg-transparent text-neutral dark-theme:text-white',
@@ -118,23 +143,28 @@ const pt = computed(() => ({
       'flex shrink-0 items-center justify-center px-3 py-2'
   },
   overlay: {
-    class: [
-      // dropdown panel
-      'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg border border-solid border-zinc-100 dark-theme:border-zinc-700'
-    ]
+    class: cn(
+      'mt-2 p-2 rounded-lg',
+      'bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
+      'border border-solid border-neutral-200 dark-theme:border-zinc-700'
+    )
   },
+  listContainer: () => ({
+    style: `max-height: ${listMaxHeight}`,
+    class: 'overflow-y-auto scrollbar-hide'
+  }),
   list: {
     class:
       // Same list tone/size as MultiSelect
-      'flex flex-col gap-1 p-0 list-none border-none text-xs'
+      'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
   },
   option: ({
     context
   }: SelectPassThroughMethodOptions<{ name: string; value: string }>) => ({
     class: [
       // Row layout
-      'flex items-center justify-between gap-3 px-3 py-2',
-      'hover:bg-neutral-100/50 hover:dark-theme:bg-zinc-700/50',
+      'flex items-center justify-between gap-3 px-2 py-3 rounded',
+      'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
       // Selected state + check icon
       { 'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context.selected },
       // Add focus state for keyboard navigation
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index 8fcf0409f..85f05d540 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseWidgetLayout :content-title="$t('Checkpoints')">
+  <BaseModalLayout :content-title="$t('Checkpoints')">
     <template #leftPanel>
       <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
         <template #header-icon>
@@ -12,7 +12,7 @@
     </template>
 
     <template #header>
-      <SearchBox v-model="searchQuery" class="max-w-[384px]" />
+      <SearchBox v-model="searchQuery" size="lg" class="max-w-[384px]" />
     </template>
 
     <template #header-right-area>
@@ -56,7 +56,7 @@
     </template>
 
     <template #contentFilter>
-      <div class="relative px-6 pt-2 pb-4 flex gap-2">
+      <div class="relative px-6 pb-4 flex gap-2">
         <MultiSelect
           v-model="selectedFrameworks"
           v-model:search-query="searchText"
@@ -87,14 +87,8 @@
 
     <template #content>
       <!-- Card Examples -->
-      <div class="flex flex-wrap gap-2">
-        <CardContainer
-          v-for="i in 100"
-          :key="i"
-          ratio="square"
-          :max-width="480"
-          :min-width="230"
-        >
+      <div :style="gridStyle">
+        <CardContainer v-for="i in 100" :key="i" ratio="square">
           <template #top>
             <CardTop ratio="landscape">
               <template #default>
@@ -124,17 +118,16 @@
           </template>
         </CardContainer>
       </div>
-      <!-- </div> -->
     </template>
 
     <template #rightPanel>
       <RightSidePanel></RightSidePanel>
     </template>
-  </BaseWidgetLayout>
+  </BaseModalLayout>
 </template>
 
 <script setup lang="ts">
-import { provide, ref, watch } from 'vue'
+import { computed, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -147,11 +140,12 @@ import SquareChip from '@/components/chip/SquareChip.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SearchBox from '@/components/input/SearchBox.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
-import BaseWidgetLayout from '@/components/widget/layout/BaseWidgetLayout.vue'
+import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import RightSidePanel from '@/components/widget/panel/RightSidePanel.vue'
 import { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
+import { createGridStyle } from '@/utils/gridUtil'
 
 const frameworkOptions = ref([
   { name: 'Vue', value: 'vue' },
@@ -207,6 +201,8 @@ const selectedSort = ref<string>('popular')
 
 const selectedNavItem = ref<string | null>('installed')
 
+const gridStyle = computed(() => createGridStyle())
+
 watch(searchText, (newQuery) => {
   console.log('searchText:', searchText.value, newQuery)
 })
diff --git a/src/components/widget/layout/BaseWidget.stories.ts b/src/components/widget/layout/BaseModalLayout.stories.ts
similarity index 95%
rename from src/components/widget/layout/BaseWidget.stories.ts
rename to src/components/widget/layout/BaseModalLayout.stories.ts
index 8ec98b980..5b012326d 100644
--- a/src/components/widget/layout/BaseWidget.stories.ts
+++ b/src/components/widget/layout/BaseModalLayout.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { provide, ref } from 'vue'
+import { computed, provide, ref } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
@@ -13,10 +13,11 @@ import SearchBox from '@/components/input/SearchBox.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
+import { createGridStyle } from '@/utils/gridUtil'
 
 import LeftSidePanel from '../panel/LeftSidePanel.vue'
 import RightSidePanel from '../panel/RightSidePanel.vue'
-import BaseWidgetLayout from './BaseWidgetLayout.vue'
+import BaseModalLayout from './BaseModalLayout.vue'
 
 interface StoryArgs {
   contentTitle: string
@@ -29,7 +30,7 @@ interface StoryArgs {
 }
 
 const meta: Meta<StoryArgs> = {
-  title: 'Components/Widget/Layout/BaseWidgetLayout',
+  title: 'Components/Widget/Layout/BaseModalLayout',
   argTypes: {
     contentTitle: {
       control: 'text',
@@ -67,7 +68,7 @@ type Story = StoryObj<typeof meta>
 
 const createStoryTemplate = (args: StoryArgs) => ({
   components: {
-    BaseWidgetLayout,
+    BaseModalLayout,
     LeftSidePanel,
     RightSidePanel,
     SearchBox,
@@ -156,6 +157,8 @@ const createStoryTemplate = (args: StoryArgs) => ({
     const selectedProjects = ref<string[]>([])
     const selectedSort = ref<string>('popular')
 
+    const gridStyle = computed(() => createGridStyle())
+
     return {
       args,
       t,
@@ -167,12 +170,13 @@ const createStoryTemplate = (args: StoryArgs) => ({
       sortOptions,
       selectedFrameworks,
       selectedProjects,
-      selectedSort
+      selectedSort,
+      gridStyle
     }
   },
   template: `
     <div>
-      <BaseWidgetLayout v-if="!args.hasRightPanel" :content-title="args.contentTitle || 'Content Title'">
+      <BaseModalLayout v-if="!args.hasRightPanel" :content-title="args.contentTitle || 'Content Title'">
         <!-- Left Panel -->
         <template v-if="args.hasLeftPanel" #leftPanel>
           <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
@@ -189,6 +193,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <template v-if="args.hasHeader" #header>
           <SearchBox
             class="max-w-[384px]"
+            size="lg"
             :modelValue="searchQuery"
             @update:modelValue="searchQuery = $event"
           />
@@ -231,7 +236,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Content Filter -->
         <template v-if="args.hasContentFilter" #contentFilter>
-          <div class="relative px-6 pt-2 pb-4 flex gap-2">
+          <div class="relative px-6 py-4 flex gap-2">
             <MultiSelect
               v-model="selectedFrameworks"
               label="Select Frameworks"
@@ -260,7 +265,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Content -->
         <template #content>
-          <div class="grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))">
+          <div :style="gridStyle">
             <CardContainer
               v-for="i in args.cardCount"
               :key="i"
@@ -293,9 +298,9 @@ const createStoryTemplate = (args: StoryArgs) => ({
             </CardContainer>
           </div>
         </template>
-      </BaseWidgetLayout>
+      </BaseModalLayout>
 
-      <BaseWidgetLayout v-else :content-title="args.contentTitle || 'Content Title'">
+      <BaseModalLayout v-else :content-title="args.contentTitle || 'Content Title'">
         <!-- Same content but WITH right panel -->
         <!-- Left Panel -->
         <template v-if="args.hasLeftPanel" #leftPanel>
@@ -313,6 +318,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <template v-if="args.hasHeader" #header>
           <SearchBox
             class="max-w-[384px]"
+            size="lg"
             :modelValue="searchQuery"
             @update:modelValue="searchQuery = $event"
           />
@@ -355,7 +361,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Content Filter -->
         <template v-if="args.hasContentFilter" #contentFilter>
-          <div class="relative px-6 pt-2 pb-4 flex gap-2">
+          <div class="relative px-6 py-4 flex gap-2">
             <MultiSelect
               v-model="selectedFrameworks"
               label="Select Frameworks"
@@ -381,7 +387,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Content -->
         <template #content>
-          <div class="grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))">
+          <div :style="gridStyle">
             <CardContainer
               v-for="i in args.cardCount"
               :key="i"
@@ -419,7 +425,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <template #rightPanel>
           <RightSidePanel />
         </template>
-      </BaseWidgetLayout>
+      </BaseModalLayout>
     </div>
   `
 })
diff --git a/src/components/widget/layout/BaseWidgetLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
similarity index 72%
rename from src/components/widget/layout/BaseWidgetLayout.vue
rename to src/components/widget/layout/BaseModalLayout.vue
index 816da1319..c455f62ee 100644
--- a/src/components/widget/layout/BaseWidgetLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -1,21 +1,13 @@
 <template>
-  <div
-    class="base-widget-layout rounded-2xl overflow-hidden relative bg-zinc-50 dark-theme:bg-zinc-800"
-  >
+  <div :class="layoutClasses">
     <IconButton
       v-show="!isRightPanelOpen && hasRightPanel"
-      class="absolute top-4 right-16 z-10 transition-opacity duration-200"
-      :class="{
-        'opacity-0 pointer-events-none': isRightPanelOpen || !hasRightPanel
-      }"
+      :class="rightPanelButtonClasses"
       @click="toggleRightPanel"
     >
       <i-lucide:panel-right class="text-sm" />
     </IconButton>
-    <IconButton
-      class="absolute top-4 right-6 z-10 transition-opacity duration-200"
-      @click="closeDialog"
-    >
+    <IconButton :class="closeButtonClasses" @click="closeDialog">
       <i class="pi pi-times text-sm"></i>
     </IconButton>
     <div class="flex w-full h-full">
@@ -32,12 +24,9 @@
         </nav>
       </Transition>
 
-      <div class="flex-1 flex bg-zinc-100 dark-theme:bg-neutral-900">
+      <div :class="mainContainerClasses">
         <div class="w-full h-full flex flex-col">
-          <header
-            v-if="$slots.header"
-            class="w-full h-16 px-6 py-4 flex justify-between gap-2"
-          >
+          <header v-if="$slots.header" :class="headerClasses">
             <div class="flex-1 flex gap-2 shrink-0">
               <IconButton v-if="!notMobile" @click="toggleLeftPanel">
                 <i-lucide:panel-left v-if="!showLeftPanel" class="text-sm" />
@@ -46,12 +35,7 @@
               <slot name="header"></slot>
             </div>
             <slot name="header-right-area"></slot>
-            <div
-              class="flex justify-end gap-2 w-0"
-              :class="
-                hasRightPanel && !isRightPanelOpen ? 'min-w-18' : 'min-w-8'
-              "
-            >
+            <div :class="rightAreaClasses">
               <IconButton
                 v-if="isRightPanelOpen && hasRightPanel"
                 @click="toggleRightPanel"
@@ -67,14 +51,14 @@
             <h2 v-if="!$slots.leftPanel" class="text-xxl px-6 pt-2 pb-6 m-0">
               {{ contentTitle }}
             </h2>
-            <div class="min-h-0 px-6 pt-0 pb-10 overflow-y-auto scrollbar-hide">
+            <div :class="contentContainerClasses">
               <slot name="content"></slot>
             </div>
           </main>
         </div>
         <aside
           v-if="hasRightPanel && isRightPanelOpen"
-          class="w-1/4 min-w-40 max-w-80"
+          :class="rightPanelClasses"
         >
           <slot name="rightPanel"></slot>
         </aside>
@@ -89,6 +73,7 @@ import { computed, inject, ref, useSlots, watch } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 import { OnCloseKey } from '@/types/widgetTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 const { contentTitle } = defineProps<{
   contentTitle: string
@@ -137,6 +122,50 @@ const toggleLeftPanel = () => {
 const toggleRightPanel = () => {
   isRightPanelOpen.value = !isRightPanelOpen.value
 }
+
+// Computed classes for better readability
+const layoutClasses = cn(
+  'base-widget-layout',
+  'rounded-2xl overflow-hidden relative',
+  'bg-zinc-50 dark-theme:bg-zinc-800'
+)
+
+const rightPanelButtonClasses = computed(() => {
+  return cn('absolute top-4 right-18 z-10', 'transition-opacity duration-200', {
+    'opacity-0 pointer-events-none':
+      isRightPanelOpen.value || !hasRightPanel.value
+  })
+})
+
+const closeButtonClasses = cn(
+  'absolute top-4 right-6 z-10',
+  'transition-opacity duration-200'
+)
+
+const mainContainerClasses = cn(
+  'flex-1 flex',
+  'bg-zinc-100 dark-theme:bg-neutral-900'
+)
+
+const headerClasses = cn(
+  'w-full h-18 px-6',
+  'flex items-center justify-between gap-2'
+)
+
+const rightAreaClasses = computed(() => {
+  return cn(
+    'flex justify-end gap-2 w-0',
+    hasRightPanel.value && !isRightPanelOpen.value ? 'min-w-22' : 'min-w-10'
+  )
+})
+
+const contentContainerClasses = computed(() => {
+  return cn('min-h-0 px-6 pt-0 pb-10', 'overflow-y-auto scrollbar-hide')
+})
+
+const rightPanelClasses = computed(() => {
+  return cn('w-1/4 min-w-40 max-w-80')
+})
 </script>
 <style scoped>
 .base-widget-layout {
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index c159dc6d5..206c05318 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center gap-2 px-4 py-2 text-xs rounded-md transition-colors cursor-pointer"
+    class="flex items-center gap-2 px-4 py-3 text-sm rounded-md transition-colors cursor-pointer"
     :class="
       active
         ? 'bg-neutral-100 dark-theme:bg-zinc-700 text-neutral'
diff --git a/src/components/widget/nav/NavTitle.vue b/src/components/widget/nav/NavTitle.vue
index a1f757f8b..ac3b62048 100644
--- a/src/components/widget/nav/NavTitle.vue
+++ b/src/components/widget/nav/NavTitle.vue
@@ -1,6 +1,6 @@
 <template>
   <h3
-    class="m-0 px-3 py-0 pt-5 text-xxs font-bold uppercase text-neutral-400 dark-theme:text-neutral-400"
+    class="m-0 px-3 py-0 pt-5 text-xs font-bold uppercase text-neutral-400 dark-theme:text-neutral-400"
   >
     {{ title }}
   </h3>
diff --git a/src/composables/usePopoverSizing.ts b/src/composables/usePopoverSizing.ts
new file mode 100644
index 000000000..6f6196c88
--- /dev/null
+++ b/src/composables/usePopoverSizing.ts
@@ -0,0 +1,30 @@
+import { type CSSProperties, type ComputedRef, computed } from 'vue'
+
+interface PopoverSizeOptions {
+  minWidth?: string
+  maxWidth?: string
+}
+
+/**
+ * Composable for managing popover sizing styles
+ * @param options Popover size configuration
+ * @returns Computed style object for popover sizing
+ */
+export function usePopoverSizing(
+  options: PopoverSizeOptions
+): ComputedRef<CSSProperties> {
+  return computed(() => {
+    const { minWidth, maxWidth } = options
+    const style: CSSProperties = {}
+
+    if (minWidth) {
+      style.minWidth = minWidth
+    }
+
+    if (maxWidth) {
+      style.maxWidth = maxWidth
+    }
+
+    return style
+  })
+}
diff --git a/src/types/buttonTypes.ts b/src/types/buttonTypes.ts
index 2d39d64d9..5c9fed88a 100644
--- a/src/types/buttonTypes.ts
+++ b/src/types/buttonTypes.ts
@@ -56,8 +56,8 @@ export const getBorderButtonTypeClasses = (type: ButtonType = 'primary') => {
 export const getIconButtonSizeClasses = (size: ButtonSize = 'md') => {
   const sizeClasses = {
     'fit-content': 'w-auto h-auto',
-    sm: 'w-6 h-6 text-xs !rounded-md',
-    md: 'w-8 h-8 text-sm'
+    sm: 'size-8 text-xs !rounded-md',
+    md: 'size-10 text-sm'
   }
   return sizeClasses[size]
 }
diff --git a/src/utils/gridUtil.ts b/src/utils/gridUtil.ts
new file mode 100644
index 000000000..5c13cfc8e
--- /dev/null
+++ b/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
+  }
+}