app/components/malio/select/Select.vue

@@ -1,8 +1,7 @@
 <template>
   <div
     ref="root"
-    class="relative mt-4 w-full"
-    :class="[minWidth, maxWidth]"
+    :class="mergedGroupClass"
   >
     <button
       :id="buttonId"
@@ -154,6 +153,7 @@
 <script setup lang="ts">
 import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
 
 defineOptions({name: 'MalioSelect', inheritAttrs: false})
 
@@ -176,6 +176,7 @@ const props = withDefaults(defineProps<{
   textLabel?: string
   rounded?: string
   disabled?: boolean
+  groupClass?: string
 }>(), {
   options: () => [],
   emptyOptionLabel: '',
@@ -190,6 +191,7 @@ const props = withDefaults(defineProps<{
   textLabel: 'text-sm',
   rounded: 'rounded-md',
   disabled: false,
+  groupClass: '',
 })
 
 const emit = defineEmits<{
@@ -208,6 +210,9 @@ const normalizedOptions = computed<Option[]>(() => [
   {label: props.emptyOptionLabel, value: null},
   ...props.options,
 ])
+const mergedGroupClass = computed(() =>
+  twMerge('relative mt-4 w-full', props.minWidth, props.maxWidth, props.groupClass),
+)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isOptionSelected = computed(() =>
@@ -315,7 +320,6 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
 
 :deep(ul[role="listbox"]) {
   scrollbar-width: auto;
-  scrollbar-gutter: stable;
 }
 
 :deep(.select-scrollbar-primary) {