fix: use CSS table layout for column alignment
Replaced flex containers with display: table/table-row/table-cell. This guarantees column widths are shared between header and all rows, fixing the misalignment. Subject column gets remaining width, all others use fixed pixel widths. Resize handles on header cells still work. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Gjermund Høsøien Wiggen
@@ -882,29 +882,30 @@ function TicketWorkbenchContent() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Table layout for consistent column alignment */}
|
||||
<div style={{ display: "table", width: "100%" }}>
|
||||
{/* Column header */}
|
||||
<div className={cn(
|
||||
"sticky top-0 z-10 flex border-b border-border bg-muted/50",
|
||||
"sticky top-0 z-10 border-b border-border bg-muted/50",
|
||||
density === "compact" ? "min-h-7" : "min-h-8"
|
||||
)}>
|
||||
<div className="w-9 shrink-0" />
|
||||
)} style={{ display: "table-row" }}>
|
||||
<div style={{ display: "table-cell", width: 36 }} />
|
||||
{availableColumns.filter((c) => c.visible).map((col) => (
|
||||
<div
|
||||
key={col.key}
|
||||
className="relative flex shrink-0 items-center gap-1 border-r border-border/60 px-3 last:border-r-0"
|
||||
style={{ width: col.key === "subject" ? undefined : col.width, flex: col.key === "subject" ? 1 : undefined, minWidth: col.key === "subject" ? 200 : undefined }}
|
||||
className="relative border-r border-border/60 px-3 align-middle last:border-r-0"
|
||||
style={{ display: "table-cell", width: col.key === "subject" ? undefined : col.width }}
|
||||
>
|
||||
<span className="text-[11px] font-semibold uppercase text-muted-foreground truncate">
|
||||
<span className="text-[10px] font-semibold uppercase text-muted-foreground/60 truncate block">
|
||||
{col.label}
|
||||
</span>
|
||||
{/* Resize handle */}
|
||||
<div
|
||||
className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/40"
|
||||
onMouseDown={(e) => handleColumnResize(col.key, e)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div className="w-12 shrink-0" />
|
||||
<div style={{ display: "table-cell", width: 48 }} />
|
||||
</div>
|
||||
|
||||
{filteredTickets.map((ticket) => {
|
||||
@@ -914,48 +915,57 @@ function TicketWorkbenchContent() {
|
||||
: null;
|
||||
|
||||
return (
|
||||
<button
|
||||
<div
|
||||
key={ticket.id}
|
||||
type="button"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => setSelectedId(ticket.id)}
|
||||
onDoubleClick={() => router.push(`/tickets/${ticket.id}`)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") router.push(`/tickets/${ticket.id}`); }}
|
||||
className={cn(
|
||||
"flex items-center border-b border-border/80 text-left transition-colors",
|
||||
density === "compact" ? "min-h-9" : "min-h-12",
|
||||
"cursor-pointer border-b border-border/80",
|
||||
density === "compact" ? "" : "",
|
||||
selected
|
||||
? "bg-accent/80 shadow-[inset_3px_0_0_var(--primary)]"
|
||||
: "hover:bg-accent/45"
|
||||
)}
|
||||
style={{ display: "table-row" }}
|
||||
>
|
||||
{/* Checkbox */}
|
||||
<span className="flex w-9 shrink-0 items-center justify-center" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-center" style={{ display: "table-cell", width: 36, verticalAlign: "middle" }} onClick={(e) => e.stopPropagation()}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={batchIds.has(ticket.id)}
|
||||
onChange={() => toggleBatchId(ticket.id)}
|
||||
className="h-3.5 w-3.5 rounded border-border accent-primary"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{availableColumns.filter((c) => c.visible).map((col) => {
|
||||
const cellStyle = {
|
||||
display: "table-cell" as const,
|
||||
width: col.key === "subject" ? undefined : col.width,
|
||||
verticalAlign: "middle" as const,
|
||||
padding: density === "compact" ? "4px 12px" : "8px 12px",
|
||||
};
|
||||
|
||||
if (col.key.startsWith("cf.")) {
|
||||
const cfKey = col.key.slice(3);
|
||||
const cfValue = ticket.custom_fields?.find((v) => v.custom_field?.key === cfKey || v.custom_field?.name === cfKey)?.value;
|
||||
return (
|
||||
<span key={col.key} className="shrink-0 truncate px-3 text-sm text-foreground" style={{ width: col.width }}>
|
||||
<div key={col.key} className="truncate text-sm text-foreground" style={cellStyle}>
|
||||
{cfValue ?? "—"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
switch (col.key) {
|
||||
case "id":
|
||||
return (
|
||||
<span key={col.key} className="shrink-0 px-3 font-mono text-xs font-semibold text-muted-foreground" style={{ width: col.width }}>
|
||||
<div key={col.key} className="font-mono text-xs font-semibold text-muted-foreground" style={cellStyle}>
|
||||
{formatTicketId(ticket.id)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
case "subject":
|
||||
return (
|
||||
<span key={col.key} className="min-w-0 flex-1 px-3" style={{ minWidth: 200 }}>
|
||||
<div key={col.key} className="min-w-[200px]" style={cellStyle}>
|
||||
<span className="block truncate text-sm font-semibold text-foreground">
|
||||
{ticket.subject}
|
||||
</span>
|
||||
@@ -966,48 +976,49 @@ function TicketWorkbenchContent() {
|
||||
Created {relativeTime(ticket.created_at)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
case "status":
|
||||
return (
|
||||
<span key={col.key} className="shrink-0 px-3" style={{ width: col.width }}>
|
||||
<div key={col.key} style={cellStyle}>
|
||||
<TicketStatusBadge status={ticket.status} />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
case "queue":
|
||||
return (
|
||||
<span key={col.key} className="shrink-0 truncate px-3 text-sm font-medium text-muted-foreground" style={{ width: col.width }}>
|
||||
<div key={col.key} className="truncate text-sm font-medium text-muted-foreground" style={cellStyle}>
|
||||
{queueName(queues, ticket.queue_id)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
case "owner":
|
||||
return (
|
||||
<span key={col.key} className="shrink-0 truncate px-3 text-sm text-foreground" style={{ width: col.width }}>
|
||||
<div key={col.key} className="truncate text-sm text-foreground" style={cellStyle}>
|
||||
{ownerName ?? "—"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
case "created":
|
||||
return (
|
||||
<span key={col.key} className="shrink-0 px-3 text-xs text-muted-foreground" style={{ width: col.width }}>
|
||||
<div key={col.key} className="text-xs text-muted-foreground" style={cellStyle}>
|
||||
{relativeTime(ticket.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
case "updated":
|
||||
return (
|
||||
<span key={col.key} className="shrink-0 px-3 text-xs text-muted-foreground" style={{ width: col.width }}>
|
||||
<div key={col.key} className="text-xs text-muted-foreground" style={cellStyle}>
|
||||
{relativeTime(ticket.updated_at)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return <span key={col.key} className="shrink-0 px-3" style={{ width: col.width }} />;
|
||||
return <div key={col.key} style={cellStyle} />;
|
||||
}
|
||||
})}
|
||||
<span className="flex w-12 shrink-0 justify-end px-2 text-muted-foreground">
|
||||
<div className="flex justify-end px-2 text-muted-foreground" style={{ display: "table-cell", width: 48, verticalAlign: "middle" }}>
|
||||
<ChevronRightIcon className="h-4 w-4" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user