fix: move popoverStyle to content container and add i18n pluralization

- Move popoverStyle from individual items to ComboboxContent/SelectContent
  so the entire popup (including header/empty state) is constrained
- Use usePopoverSizing in SingleSelect for consistency with MultiSelect
- Add vue-i18n plural pipe syntax for itemsSelected key

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/input/MultiSelect.vue

@@ -57,6 +57,7 @@
         position="popper"
         :side-offset="8"
         align="start"
+        :style="popoverStyle"
         :class="
           cn(
             'z-3000 overflow-hidden',
@@ -101,7 +102,9 @@
               v-if="showSelectedCount"
               class="px-1 text-sm text-base-foreground"
             >
-              {{ $t('g.itemsSelected', { count: selectedCount }) }}
+              {{
+                $t('g.itemsSelected', { count: selectedCount }, selectedCount)
+              }}
             </span>
             <Button
               v-if="showClearButton"
@@ -136,7 +139,6 @@
                 'data-highlighted:bg-secondary-background-selected data-highlighted:hover:bg-secondary-background-selected'
               )
             "
-            :style="popoverStyle"
           >
             <div
               class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200 group-data-[state=checked]:bg-primary-background group-data-[state=unchecked]:bg-secondary-background"

src/components/input/SingleSelect.vue

@@ -49,6 +49,7 @@
       <SelectContent
         position="popper"
         :side-offset="8"
+        :style="optionStyle"
         :class="
           cn(
             'z-3000 overflow-hidden',
@@ -81,7 +82,6 @@
                 'data-[state=checked]:hover:bg-secondary-background-selected'
               )
             "
-            :style="optionStyle"
           >
             <SelectItemText class="truncate">
               {{ opt.name }}
@@ -114,9 +114,9 @@ import {
   SelectValue,
   SelectViewport
 } from 'reka-ui'
-import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
 import type { SelectOption } from './types'
@@ -158,13 +158,8 @@ const selectedItem = defineModel<string | undefined>({ required: true })
 
 const { t } = useI18n()
 
-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('; ')
+const optionStyle = usePopoverSizing({
+  minWidth: popoverMinWidth,
+  maxWidth: popoverMaxWidth
 })
 </script>

src/locales/en/main.json

@@ -256,7 +256,7 @@
     "clearAll": "Clear all",
     "copyURL": "Copy URL",
     "releaseTitle": "{package} {version} Release",
-    "itemsSelected": "{count} items selected",
+    "itemsSelected": "{count} item selected | {count} items selected",
     "multiSelectDropdown": "Multi-select dropdown",
     "singleSelectDropdown": "Single-select dropdown",
     "progressCountOf": "of",