fix tests, add autofocus disable option for dropdown

resources/css/app.css

@@ -2,11 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 :root.dark {
-    --color-bg-primary: #0f1011;
-    --color-bg-secondary: #17181a;
+    --color-bg-primary: #101012;
+    --color-bg-secondary: #17181B;
     --color-bg-tertiary: #2A2C32;
     --color-bg-quaternary: #141518;
-    --color-bg-background: #0B0B0B;
+    --color-bg-background: #090909;
     --color-text-primary: #ffffff;
     --color-text-secondary: #e3e4e6;
     --color-text-tertiary: #969799;
@@ -22,7 +22,7 @@
 
     --theme-color-menu-active: var(--color-bg-secondary);
     --theme-color-card-background: var(--color-bg-secondary);
-    --theme-shadow-card: 0 4px 7px 0px rgb(0 0 0 / 30%);
+    --theme-shadow-card: 0 4px 7px 0px rgb(0 0 0 / 15%);
     --theme-shadow-dropdown: 0 4px 7px 0px rgb(0 0 0 / 40%);
 
     --theme-color-card-background-active: var(--color-bg-tertiary);

resources/js/Layouts/AppLayout.vue

@@ -266,7 +266,7 @@ const page = usePage<{
             <BillingBanner v-if="isBillingActivated()" />
 
             <div
-                class="min-h-screen bg-default-background border-l border-default-background-separator">
+                class="min-h-screen flex flex-col bg-default-background border-l border-default-background-separator">
                 <!-- Page Heading -->
                 <header
                     v-if="$slots.header"
@@ -281,7 +281,7 @@ const page = usePage<{
                 </header>
 
                 <!-- Page Content -->
-                <main class="pb-28">
+                <main class="pb-28 flex-1">
                     <slot />
 
                 </main>

resources/js/packages/ui/src/Buttons/DangerButton.vue

@@ -10,7 +10,6 @@ withDefaults(
     }
 );
 </script>
-Modal.vue
 <template>
     <button
         :type="type"

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

@@ -5,18 +5,23 @@ const props = withDefaults(
     defineProps<{
         align?: 'center' | 'end' | 'start';
         closeOnContentClick?: boolean;
+        autoFocus?: boolean;
     }>(),
     {
         align: 'start',
         closeOnContentClick: true,
+        autoFocus: true,
     }
 );
 
 const emit = defineEmits(['open', 'submit']);
 const open = defineModel({ default: false });
 
-
-
+function handleAutofocus(event: Event) {
+    if (props.autoFocus === false) {
+        event.preventDefault();
+    }
+}
 
 function onContentClick() {
     if (props.closeOnContentClick === true) {
@@ -42,6 +47,7 @@ function onOpenChange(value: boolean) {
             <PopoverContent
                 :align="align"
                 class="rounded-lg overflow-hidden relative border border-card-border overflow-none shadow-dropdown bg-card-background"
+                @open-auto-focus="handleAutofocus"
                 @click="onContentClick">
                 <slot name="content" />
             </PopoverContent>

resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue

@@ -171,6 +171,7 @@ function closeAndFocusInput() {
         <Dropdown
             v-model="open"
             align="center"
+            :auto-focus="false"
             :close-on-content-click="false"
             @submit="open = false">
             <template #trigger>