add detailed reporting page

resources/js/packages/ui/src/Input/MultiselectDropdown.vue

@@ -165,7 +165,9 @@ const highlightedItem = computed(() => {
                 ref="searchInput"
                 class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
                 :placeholder="searchPlaceholder" />
-            <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
+            <div
+                ref="dropdownViewport"
+                class="min-w-60 max-w-80 max-h-60 overflow-y-scroll">
                 <div
                     v-for="item in filteredItems"
                     :key="props.getKeyFromItem(item)"

resources/js/packages/ui/src/Input/MultiselectDropdownItem.vue

@@ -21,7 +21,9 @@ const iconClasses = computed(() => {
     <div
         class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
         <CheckCircleIcon :class="twMerge(iconClasses, 'w-5')"></CheckCircleIcon>
-        <span>{{ name }}</span>
+        <span class="flex-1 min-w-0 overflow-ellipsis overflow-hidden">{{
+            name
+        }}</span>
     </div>
 </template>