add modal focus trap & fix design bug in project billable section

resources/js/packages/ui/src/Modal.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
 import { useId } from 'radix-vue';
 import { isLastLayer, layers } from '@/packages/ui/src/utils/dismissableLayer';
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+import { ref } from 'vue';
 
 const props = defineProps({
     show: {
@@ -74,6 +76,23 @@ const maxWidthClass = computed(() => {
         '2xl': 'sm:max-w-2xl',
     }[props.maxWidth];
 });
+
+const target = ref();
+const { activate, deactivate } = useFocusTrap(target);
+watch(
+    () => props.show,
+    (value) => {
+        if (value) {
+            nextTick(() => {
+                activate();
+            });
+        } else {
+            nextTick(() => {
+                deactivate();
+            });
+        }
+    }
+);
 </script>
 
 <template>
@@ -109,6 +128,7 @@ const maxWidthClass = computed(() => {
                     <div
                         v-show="show"
                         role="dialog"
+                        ref="target"
                         class="mb-6 bg-default-background border border-card-border rounded-lg shadow-xl transform transition-all sm:w-full sm:mx-auto"
                         :class="maxWidthClass">
                         <slot v-if="show" />

resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue

@@ -57,7 +57,7 @@ const emit = defineEmits(['submit']);
 <template>
     <div class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4 pt-6">
         <div>
-            <div class="flex items-center space-x-1">
+            <div class="flex items-center space-x-1 mb-2">
                 <BillableIcon
                     class="text-text-quaternary h-4 ml-1 mr-0.5"></BillableIcon>
                 <InputLabel for="billable" value="Billable Default" />