diff --git a/packages/ui/src/Combobox.vue b/packages/ui/src/Combobox.vue
index 80a1074f94d..f409b7a82ad 100644
--- a/packages/ui/src/Combobox.vue
+++ b/packages/ui/src/Combobox.vue
@@ -1,6 +1,18 @@
 <script setup>
 import { cva } from 'cva';
-import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxRoot, ComboboxTrigger, ComboboxPortal, ComboboxViewport, FocusScope } from 'reka-ui';
+import {
+    ComboboxAnchor,
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxRoot,
+    ComboboxTrigger,
+    ComboboxPortal,
+    ComboboxViewport,
+    ComboboxVirtualizer,
+    FocusScope
+} from 'reka-ui';
 import { computed, nextTick, ref, useAttrs, useTemplateRef, watch } from 'vue';
 import Button from './Button/Button.vue';
 import Icon from './Icon/Icon.vue';
@@ -319,7 +331,7 @@ defineExpose({
                         :class="[
                             'shadow-ui-sm z-100 rounded-lg border border-gray-200 bg-white p-2 dark:border-white/10 dark:bg-gray-800',
                             'max-h-[var(--reka-combobox-content-available-height)] w-[var(--reka-combobox-trigger-width)] min-w-fit',
-                            '[&_[data-reka-combobox-viewport]]:grid [&_[data-reka-combobox-viewport]]:gap-1'
+                            'overflow-hidden'
                         ]"
                         @escape-key-down="nextTick(() => $refs.trigger.$el.focus())"
                         data-ui-combobox-content
@@ -333,34 +345,42 @@ defineExpose({
                                 event.preventDefault();
                             }"
                         >
-                            <ComboboxViewport>
+                            <ComboboxViewport class="max-h-[700px] overflow-y-auto">
                                 <ComboboxEmpty class="p-2 text-sm" data-ui-combobox-empty>
                                     <slot name="no-options" v-bind="{ searchQuery }">
                                         {{ __('No options available.') }}
                                     </slot>
                                 </ComboboxEmpty>
 
-                                <ComboboxItem
+                                <ComboboxVirtualizer
                                     v-if="filteredOptions"
-                                    v-for="(option, index) in filteredOptions"
-                                    :key="index + JSON.stringify(modelValue)"
-                                    :value="getOptionValue(option)"
-                                    :text-value="getOptionLabel(option)"
-                                    :disabled="isOptionDisabled(option)"
-                                    :class="itemClasses({ size: size, selected: isSelected(option) })"
-                                    as="button"
-                                    :data-ui-combobox-item="getOptionValue(option)"
-                                    @select="() => {
+                                    v-slot="{ option, virtualItem }"
+                                    :options="filteredOptions"
+                                    :estimate-size="37"
+                                    :text-content="(opt) => getOptionLabel(opt)"
+                                >
+                                    <div class="py-1 w-full">
+                                        <ComboboxItem
+                                            :key="virtualItem.index + JSON.stringify(modelValue)"
+                                            :value="getOptionValue(option)"
+                                            :text-value="getOptionLabel(option)"
+                                            :disabled="isOptionDisabled(option)"
+                                            :class="itemClasses({ size: size, selected: isSelected(option) })"
+                                            as="button"
+                                            :data-ui-combobox-item="getOptionValue(option)"
+                                            @select="() => {
                                         dropdownOpen = !closeOnSelect;
                                         if (closeOnSelect) $refs.trigger.$el.focus();
                                     }"
-                                >
-                                    <slot name="option" v-bind="option">
-                                        <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
-                                        <span v-if="labelHtml" v-html="getOptionLabel(option)" />
-                                        <span v-else>{{ __(getOptionLabel(option)) }}</span>
-                                    </slot>
-                                </ComboboxItem>
+                                        >
+                                            <slot name="option" v-bind="option">
+                                                <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
+                                                <span v-if="labelHtml" v-html="getOptionLabel(option)" />
+                                                <span v-else>{{ __(getOptionLabel(option)) }}</span>
+                                            </slot>
+                                        </ComboboxItem>
+                                    </div>
+                                </ComboboxVirtualizer>
                             </ComboboxViewport>
                         </FocusScope>
                     </ComboboxContent>
diff --git a/resources/js/components/fieldtypes/IconFieldtype.vue b/resources/js/components/fieldtypes/IconFieldtype.vue
index 7c3cc8d905e..0f868ceb45f 100644
--- a/resources/js/components/fieldtypes/IconFieldtype.vue
+++ b/resources/js/components/fieldtypes/IconFieldtype.vue
@@ -77,8 +77,10 @@ request();
     >
         <template #option="option">
             <div class="flex items-center">
-                <Icon v-if="!option.html" :name="option.label" class="size-4" />
-                <div v-if="option.html" v-html="option.html" class="size-4" />
+                <div class="size-4">
+                    <Icon v-if="!option.html" :name="option.label" class="size-4" />
+                    <div v-if="option.html" v-html="option.html" class="size-4" />
+                </div>
                 <span class="ms-3 truncate">
                     {{ __(option.label) }}
                 </span>
diff --git a/resources/js/tests/components/ui/Combobox.test.js b/resources/js/tests/components/ui/Combobox.test.js
index 1d052a51b22..b792de1b3ac 100644
--- a/resources/js/tests/components/ui/Combobox.test.js
+++ b/resources/js/tests/components/ui/Combobox.test.js
@@ -2,16 +2,39 @@ import { expect, test, beforeEach, vi, describe } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { Combobox } from '@/components/ui';
 
+// Mock the ComboboxVirtualizer to render options without virtualization.
+// This is necessary because virtualization relies on browser APIs which aren't available in our tests.
+vi.mock('reka-ui', async () => {
+    const actual = await vi.importActual('reka-ui');
+    return {
+        ...actual,
+        ComboboxVirtualizer: {
+            name: 'ComboboxVirtualizer',
+            props: ['options', 'overscan', 'estimateSize', 'textContent'],
+            setup(props, { slots }) {
+                // Instead of virtualization, render all items directly
+                return () => {
+                    const items = props.options.map((option, index) => {
+                        return slots.default({
+                            option,
+                            virtualItem: { index, key: index, start: index * 37 },
+                            virtualizer: { scrollToIndex: () => {} }
+                        });
+                    });
+                    return items;
+                };
+            }
+        }
+    };
+});
+
 beforeEach(() => {
     Element.prototype.scrollIntoView = vi.fn();
 
     global.__ = (key) => key;
 
     global.CSS = {
-        escape: (str) => {
-            // Simple implementation that handles most cases
-            return str.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
-        }
+        escape: (str) => str.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&')
     };
 
     document.body.innerHTML = '';