Ensure scrollbar doesn't overlap with options

Author: duncanmcclean

resources/js/components/ui/Combobox/Combobox.vue

@@ -447,6 +447,7 @@ defineExpose({
                                 <ComboboxViewport
                                     ref="viewport"
                                     class="max-h-[calc(var(--reka-combobox-content-available-height)-5rem)] overflow-y-scroll"
+                                    :class="{ 'pr-3': scrollbarRef?.isVisible }"
                                     data-ui-combobox-viewport
                                 >
                                     <ComboboxEmpty class="p-2 text-sm" data-ui-combobox-empty>

resources/js/components/ui/Combobox/Scrollbar.vue

@@ -109,13 +109,14 @@ onUnmounted(() => {
 
 defineExpose({
 	update,
+	isVisible,
 });
 </script>
 
 <template>
-	<div v-if="isVisible" class="absolute top-0 right-0 w-3 p-0.5 h-full pointer-events-none">
+	<div v-if="isVisible" class="absolute top-0 right-0 w-[6px] py-1 px-0.5 h-full pointer-events-none">
 		<div
-			class="absolute right-0 w-1.5 rounded-full bg-black/25 hover:bg-black/40 dark:bg-white/25 dark:hover:bg-white/40 transition-colors pointer-events-auto cursor-pointer"
+			class="absolute right-0 w-1.5 rounded-md bg-black/25 hover:bg-black/40 dark:bg-white/25 dark:hover:bg-white/40 transition-colors pointer-events-auto cursor-pointer"
 			:class="{ 'bg-black/40 dark:bg-white/40': isDragging }"
 			:style="{
                 height: `${thumbHeight}%`,