Fixed a regression, where the position column widths the line item table would get messed up of a section title was the first element

resources/js/components/documents/LineItemTable.vue

@@ -11,7 +11,7 @@ import { Table, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"
 import { NumberField, NumberFieldContent, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, } from '@/components/ui/number-field'
 import { Input } from '@/components/ui/input';
-import { Loader2, GripVertical, Trash2, Plus, TextSelect } from 'lucide-vue-next';
+import { Loader2, GripVertical, Trash2, Plus, TextSelect, BetweenHorizonalEnd } from 'lucide-vue-next';
 import Button from '../ui/button/Button.vue';
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '@/components/ui/empty'
 import NumberInput from '../ui/number-input/NumberInput.vue';
@@ -105,6 +105,19 @@ const recalculatePositions = () => {
     <Table :class="{ 'opacity-100!': !isLoading && items.length >= 1 }"
       class="table-fixed transition-opacity opacity-0 duration-300">
 
+      <!-- Dummy header so a col spanning title section in first row 
+       doesn’t mess up col widths -->
+      <TableRow class="border-0">
+        <TableHead class="h-0 w-6 px-0"></TableHead>
+        <TableHead class="h-0 w-8 px-0 text-center"></TableHead>
+        <TableHead class="h-0 "></TableHead>
+        <TableHead class="h-0 w-1/8"></TableHead>
+        <TableHead class="h-0 w-20 text-center"></TableHead>
+        <TableHead class="h-0 w-1/8 text-right pr-5"></TableHead>
+        <TableHead class="h-0 w-1/8 text-right"></TableHead>
+        <TableHead class="h-0 w-8"></TableHead>
+      </TableRow>
+
       <draggable v-model="items" tag="tbody" item-key="position" handle=".handle" ghostClass="ghost"
         @end="recalculatePositions">
         <template #item="{ element }">
@@ -127,7 +140,7 @@ const recalculatePositions = () => {
             <TableCell class="w-8 text-right px-1">
               <Button variant="ghost" size="sm" @click="deleteItem(element)"
                 class="has-[>svg]:px-1 text-muted-foreground hover:text-destructive">
-                <Trash2 :size="18" stroke-width="1.5"/>
+                <Trash2 :size="18" stroke-width="1.5" />
               </Button>
             </TableCell>
           </TableRow>
@@ -189,15 +202,21 @@ const recalculatePositions = () => {
 
             <!-- Total -->
             <TableCell class="w-1/8 text-right tabular-nums font-bold">{{ toCurrency(element.price * element.quantity)
-            }}
+              }}
             </TableCell>
 
             <!-- Buttons -->
             <TableCell class="w-8 text-right px-1">
               <Button variant="ghost" size="sm" @click="deleteItem(element)"
                 class="has-[>svg]:px-1 text-muted-foreground hover:text-destructive">
-                <Trash2 :size="18" stroke-width="1.5"/>
+                <Trash2 stroke-width="1.5" />
               </Button>
+
+              <!-- <Button variant="ghost" size="sm" @click=""
+                class="has-[>svg]:px-1 text-muted-foreground">
+                <BetweenHorizonalEnd stroke-width="1.5"/>
+              </Button> -->
+
             </TableCell>
           </TableRow>