fix: wider resize handles, table minWidth instead of width 100%

- table-layout: fixed with minWidth instead of width:100% to avoid
  browser recalculating explicit column widths
- Wider resize handles (w-3, 12px) for easier grabbing
- Better visibility on hover

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Gjermund Høsøien Wiggen
2026-06-09 22:18:49 +02:00
parent dde19f5fab
commit dd747946ea

View File

@@ -891,7 +891,7 @@ function TicketWorkbenchContent() {
) : ( ) : (
<> <>
{/* Table layout for consistent column alignment */} {/* Table layout for consistent column alignment */}
<div style={{ display: "table", width: "100%", tableLayout: "fixed" }}> <div style={{ display: "table", tableLayout: "fixed", minWidth: "100%" }}>
{/* Column header */} {/* Column header */}
<div className={cn( <div className={cn(
"sticky top-0 z-10 border-b border-border bg-muted/50", "sticky top-0 z-10 border-b border-border bg-muted/50",
@@ -904,10 +904,10 @@ function TicketWorkbenchContent() {
className="relative border-r border-border/60 px-3 align-middle last:border-r-0" className="relative border-r border-border/60 px-3 align-middle last:border-r-0"
style={{ display: "table-cell", width: col.width }} style={{ display: "table-cell", width: col.width }}
> >
{/* Resize handle: drags the boundary, resizes the column to the LEFT */} {/* Resize handle: drags the boundary, resizes column to the LEFT */}
{idx > 0 && ( {idx > 0 && (
<div <div
className="absolute left-0 top-0 h-full w-2 -ml-1 cursor-col-resize hover:bg-primary/40 z-10" className="absolute left-0 top-0 h-full w-3 -ml-1.5 cursor-col-resize hover:bg-primary/30 z-10"
onMouseDown={(e) => handleColumnResize(arr[idx - 1].key, col.key, e)} onMouseDown={(e) => handleColumnResize(arr[idx - 1].key, col.key, e)}
/> />
)} )}