Make background darker so tables are more clearly readable. Try some things with the header bar

resources/js/pages/Invoices.vue

@@ -32,8 +32,8 @@ const searchQuery = ref('')
 const searchField = ref()
 
 onMounted(async () => {
-        const invoiceResponse = await axios.get('/api/invoices')
-        invoicesData.value = invoiceResponse.data as Invoice[]
+    const invoiceResponse = await axios.get('/api/invoices')
+    invoicesData.value = invoiceResponse.data as Invoice[]
 
     const customerResponse = await axios.get('/api/customers')
     customersData.value = customerResponse.data as Customer[]
@@ -251,10 +251,10 @@ const testToast = () => {
 
     <AppLayout :breadcrumbs="breadcrumbs">
         <div
-            class="flex h-full flex-1 flex-col gap-4 overflow-x-auto p-4 p-4 bg-slate-50 dark:bg-neutral-900/40 print:bg-transparent print:p-0 print:m-0">
+            class="flex h-full flex-1 flex-col gap-4 overflow-x-auto p-4 lg:p-8 print:bg-transparent print:p-0 print:m-0">
 
             <!-- Function Header -->
-            <div id="function-header" class="flex row justify-between items-center gap-8">
+            <div id="function-header" class="flex row justify-between items-center gap-8 mb-4">
 
                 <!-- Year select -->
                 <div class="flex row items-center">
@@ -281,7 +281,9 @@ const testToast = () => {
                     <Button :variant="'ghost'" @click="selectedYearIndex--" :disabled="selectedYearIndex <= 0">
                         <ChevronRight />
                     </Button>
-                </div <!-- Search field -->
+                </div>
+
+                <!-- Search field -->
                 <div class="relative w-full max-w-sm items-center">
                     <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
                         v-model="searchQuery" />
@@ -308,11 +310,12 @@ const testToast = () => {
 
             <!-- Invoice Table -->
             <DocumentTable :invoices="filteredInvoices" :onItemClicked="showDetail" />
+
             <!-- Invoice detail dialog -->
             <InvoiceDialog :invoiceData="activeInvoice" :customers="customersData" v-model="detailDialogOpen"
                 @save="saveInvoice" @delete="deleteInvoice" />
-        </div>
 
+        </div>
     </AppLayout>
 </template>