fix(bookings): correct table overflow and width styling

Remove overflow-x-auto from the table wrapper
Apply minimum width using the UTable ui prop instead of standard classes
This commit is contained in:
2026-05-09 14:39:26 +08:00
parent f6212d8101
commit 6ba7faa696

View File

@@ -189,7 +189,7 @@
</div> </div>
</template> </template>
<div class="overflow-x-auto"> <div>
<UTable <UTable
:data="filteredBookings" :data="filteredBookings"
:columns="columns" :columns="columns"
@@ -197,7 +197,8 @@
:empty="searchQuery.trim() ? 'No matching bookings found.' : 'No bookings available yet.'" :empty="searchQuery.trim() ? 'No matching bookings found.' : 'No bookings available yet.'"
sticky="header" sticky="header"
caption="Bookings" caption="Bookings"
class="compact-table min-w-[1280px]" class="compact-table"
:ui="{ base: 'min-w-[1280px]' }"
> >
<template #customerName-cell="{ row }"> <template #customerName-cell="{ row }">
<div class="min-w-0 space-y-0.5 py-0.5"> <div class="min-w-0 space-y-0.5 py-0.5">