refactor: use static width for table cells.

This commit is contained in:
arabcoders 2026-03-31 18:34:59 +03:00
parent 90ebf44ad4
commit ca03bf716b
13 changed files with 46 additions and 46 deletions

4
.vscode/launch.json vendored
View file

@ -2,7 +2,7 @@
"version": "0.2.0",
"configurations": [
{
"name": "Node: Nuxt3",
"name": "UI: Dev",
"request": "launch",
"runtimeArgs": [
"run",
@ -38,7 +38,7 @@
},
},
{
"name": "Node: Generate UI",
"name": "UI: Generate",
"request": "launch",
"runtimeArgs": [
"run",

View file

@ -52,10 +52,10 @@
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
>
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
<table class="min-w-325 max-w-455 table-fixed w-full text-sm">
<table class="min-w-190 table-fixed w-full text-sm">
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-[5%]">
<th class="w-12">
<button type="button" class="cursor-pointer" @click="toggleMasterSelection">
<UIcon
:name="masterSelectAll ? 'i-lucide-square' : 'i-lucide-check'"
@ -64,10 +64,10 @@
</button>
</th>
<th class="text-left">Title</th>
<th class="w-[7%]">Status</th>
<th class="w-[7%]">Created</th>
<th class="w-[7%]">Size/Starts</th>
<th class="w-[8%]">Actions</th>
<th class="w-32 whitespace-nowrap">Status</th>
<th class="w-36 whitespace-nowrap">Created</th>
<th class="w-36 whitespace-nowrap">Size/Starts</th>
<th class="w-44 whitespace-nowrap">Actions</th>
</tr>
</thead>
@ -211,7 +211,7 @@
</template>
</td>
<td class="w-[1%] px-3 py-3 align-top whitespace-nowrap">
<td class="w-44 px-3 py-3 align-top whitespace-nowrap">
<div class="flex items-center justify-end gap-1">
<UButton
v-if="!item.filename"

View file

@ -48,10 +48,10 @@
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
>
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
<table class="min-w-325 w-full text-sm">
<table class="min-w-190 table-fixed w-full text-sm">
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-[5%]">
<th class="w-12">
<button type="button" class="cursor-pointer" @click="toggleMasterSelection">
<UIcon
:name="masterSelectAll ? 'i-lucide-square' : 'i-lucide-check'"
@ -61,9 +61,9 @@
</th>
<th class="w-full text-left">Video Title</th>
<th class="w-56">Progress</th>
<th class="w-[15%]">Status</th>
<th class="w-[15%]">Created</th>
<th class="w-[1%]">Actions</th>
<th class="w-32 whitespace-nowrap">Status</th>
<th class="w-36 whitespace-nowrap">Created</th>
<th class="w-44 whitespace-nowrap">Actions</th>
</tr>
</thead>
@ -194,7 +194,7 @@
</UTooltip>
</td>
<td class="w-[1%] px-3 py-3 align-top whitespace-nowrap">
<td class="w-44 px-3 py-3 align-top whitespace-nowrap">
<div class="flex items-center justify-end gap-1">
<UButton
color="warning"

View file

@ -429,7 +429,7 @@
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
>
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
<table class="min-w-215 w-full table-fixed text-sm">
<table class="min-w-215 table-fixed w-full text-sm">
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-left [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-40">

View file

@ -122,7 +122,7 @@
<table class="min-w-180 w-full table-auto text-sm">
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-left [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-[1%] whitespace-nowrap">Flags</th>
<th class="w-80 whitespace-nowrap">Flags</th>
<th>Description</th>
</tr>
</thead>
@ -132,7 +132,7 @@
:key="opt.flags.join('|')"
class="align-top hover:bg-muted/20"
>
<td class="w-[1%] px-3 py-3 align-top whitespace-nowrap">
<td class="w-80 px-3 py-3 align-top">
<div class="flex items-start gap-2">
<div class="flex flex-wrap gap-1.5">
<UBadge
@ -186,8 +186,8 @@
<table class="min-w-215 w-full table-auto text-sm">
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-left [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-[1%] whitespace-nowrap">Flags</th>
<th class="w-[1%] whitespace-nowrap">Group</th>
<th class="w-80 whitespace-nowrap">Flags</th>
<th class="w-36 whitespace-nowrap">Group</th>
<th>Description</th>
</tr>
</thead>
@ -197,7 +197,7 @@
:key="opt.flags.join('|')"
class="align-top hover:bg-muted/20"
>
<td class="w-[1%] px-3 py-3 align-top">
<td class="w-80 px-3 py-3 align-top">
<div class="flex items-start gap-2">
<div class="flex flex-wrap gap-1.5">
<UBadge
@ -227,7 +227,7 @@
</UTooltip>
</div>
</td>
<td class="w-[1%] px-3 py-3 align-top font-medium text-default whitespace-nowrap">
<td class="w-36 px-3 py-3 align-top font-medium text-default whitespace-nowrap">
{{ opt.group || 'root' }}
</td>
<td class="px-3 py-3 align-top text-default">

View file

@ -191,7 +191,7 @@
class="ml-1 inline-flex size-3.5"
/>
</th>
<th class="w-[1%] whitespace-nowrap">
<th class="w-28 whitespace-nowrap">
Size
<UIcon
v-if="sort_by === 'size'"
@ -199,7 +199,7 @@
class="ml-1 inline-flex size-3.5"
/>
</th>
<th class="w-[1%] whitespace-nowrap">
<th class="w-40 whitespace-nowrap">
Date
<UIcon
v-if="sort_by === 'date'"
@ -207,7 +207,7 @@
class="ml-1 inline-flex size-3.5"
/>
</th>
<th v-if="controlEnabled" class="w-[1%]">Actions</th>
<th v-if="controlEnabled" class="w-80 whitespace-nowrap">Actions</th>
</tr>
</thead>
@ -271,7 +271,7 @@
</UTooltip>
</td>
<td v-if="controlEnabled" class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
<td v-if="controlEnabled" class="w-80 px-3 py-3 align-middle whitespace-nowrap">
<div class="flex items-center justify-end gap-2">
<UButton
color="warning"

View file

@ -93,7 +93,7 @@
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-full text-left">Condition</th>
<th class="w-[1%]">Actions</th>
<th class="w-44 whitespace-nowrap">Actions</th>
</tr>
</thead>
@ -146,7 +146,7 @@
</div>
</td>
<td class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
<td class="w-44 px-3 py-3 align-middle whitespace-nowrap">
<div class="flex items-center justify-end gap-2">
<UButton
color="info"

View file

@ -151,7 +151,7 @@
</td>
<td
class="w-[2%] px-3 py-3 text-center align-middle whitespace-nowrap"
class="w-12 px-3 py-3 text-center align-middle whitespace-nowrap"
>
<UButton
color="error"

View file

@ -93,7 +93,7 @@
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-full text-left">Field</th>
<th class="w-[1%]">Actions</th>
<th class="w-44 whitespace-nowrap">Actions</th>
</tr>
</thead>
@ -126,7 +126,7 @@
</div>
</td>
<td class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
<td class="w-44 px-3 py-3 align-middle whitespace-nowrap">
<div class="flex items-center justify-end gap-2">
<UButton
color="info"

View file

@ -106,7 +106,7 @@
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-full text-left">Targets</th>
<th class="w-[1%]">Actions</th>
<th class="w-44 whitespace-nowrap">Actions</th>
</tr>
</thead>
@ -159,7 +159,7 @@
</div>
</td>
<td class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
<td class="w-44 px-3 py-3 align-middle whitespace-nowrap">
<div class="flex items-center justify-end gap-2">
<UButton
color="info"

View file

@ -85,7 +85,7 @@
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-full text-left">Preset</th>
<th class="w-[1%]">Actions</th>
<th class="w-44 whitespace-nowrap">Actions</th>
</tr>
</thead>
@ -114,7 +114,7 @@
</div>
</td>
<td class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
<td class="w-44 px-3 py-3 align-middle whitespace-nowrap">
<div class="flex items-center justify-end gap-2">
<UButton
color="info"

View file

@ -102,9 +102,9 @@
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-full text-left">Definition</th>
<th class="w-[18%]">Priority</th>
<th class="w-[18%]">Updated</th>
<th class="w-[1%]">Actions</th>
<th class="w-28 whitespace-nowrap">Priority</th>
<th class="w-36 whitespace-nowrap">Updated</th>
<th class="w-44 whitespace-nowrap">Actions</th>
</tr>
</thead>
@ -158,7 +158,7 @@
</UTooltip>
</td>
<td class="w-[1%] px-3 py-3 align-middle whitespace-nowrap">
<td class="w-44 px-3 py-3 align-middle whitespace-nowrap">
<div class="flex items-center justify-end gap-2">
<UButton
color="info"

View file

@ -116,10 +116,10 @@
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
>
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
<table class="min-w-290 w-full text-sm">
<table class="min-w-190 table-fixed w-full text-sm">
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-[5%]">
<th class="w-12">
<button type="button" class="cursor-pointer" @click="toggleMasterSelection">
<UIcon
:name="allSelected ? 'i-lucide-square' : 'i-lucide-square-check-big'"
@ -128,8 +128,8 @@
</button>
</th>
<th class="w-full text-left">Task</th>
<th class="w-[18%]">Timer</th>
<th class="w-[1%]">Actions</th>
<th class="w-100 whitespace-nowrap">Timer</th>
<th class="w-44 whitespace-nowrap">Actions</th>
</tr>
</thead>
@ -146,7 +146,7 @@
</label>
</td>
<td class="px-3 py-3 align-top">
<td class="w-0 px-3 py-3 align-top">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0 flex-1 space-y-2">
<div class="flex items-start gap-2">
@ -286,7 +286,7 @@
</div>
</td>
<td class="w-[1%] px-3 py-3 align-top whitespace-nowrap">
<td class="w-44 px-3 py-3 align-top whitespace-nowrap">
<div class="flex items-center justify-end gap-2">
<UButton
color="warning"