gjermund/tessera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use CSS table layout for column alignment

Browse Source 
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
2026-06-09 22:06:12 +02:00
parent b2fb69ffc5
commit d7a5b5ba1d
1 changed files with 132 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
web/src/app/page.tsx
View File

@@ -882,29 +882,30 @@ function TicketWorkbenchContent() {
</div> </div>
) : ( ) : (
<> <>
{/* Table layout for consistent column alignment */}
<div style={{ display: "table", width: "100%" }}>
{/* Column header */} {/* Column header */}
<div className={cn( <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" density === "compact" ? "min-h-7" : "min-h-8"
)}> )} style={{ display: "table-row" }}>
<div className="w-9 shrink-0" /> <div style={{ display: "table-cell", width: 36 }} />
{availableColumns.filter((c) => c.visible).map((col) => ( {availableColumns.filter((c) => c.visible).map((col) => (
<div <div
key={col.key} key={col.key}
className="relative flex shrink-0 items-center gap-1 border-r border-border/60 px-3 last:border-r-0" className="relative border-r border-border/60 px-3 align-middle last:border-r-0"
style={{ width: col.key === "subject" ? undefined : col.width, flex: col.key === "subject" ? 1 : undefined, minWidth: col.key === "subject" ? 200 : undefined }} 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} {col.label}
</span> </span>
{/* Resize handle */}
<div <div
className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/40" className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/40"
onMouseDown={(e) => handleColumnResize(col.key, e)} onMouseDown={(e) => handleColumnResize(col.key, e)}
/> />
</div> </div>
))} ))}
<div className="w-12 shrink-0" /> <div style={{ display: "table-cell", width: 48 }} />
</div> </div>
{filteredTickets.map((ticket) => { {filteredTickets.map((ticket) => {
@@ -914,48 +915,57 @@ function TicketWorkbenchContent() {
: null; : null;
return ( return (
<button <div
key={ticket.id} key={ticket.id}
type="button" role="button"
tabIndex={0}
onClick={() => setSelectedId(ticket.id)} onClick={() => setSelectedId(ticket.id)}
onDoubleClick={() => router.push(`/tickets/${ticket.id}`)} onDoubleClick={() => router.push(`/tickets/${ticket.id}`)}
onKeyDown={(e) => { if (e.key === "Enter") router.push(`/tickets/${ticket.id}`); }}
className={cn( className={cn(
"flex items-center border-b border-border/80 text-left transition-colors", "cursor-pointer border-b border-border/80",
density === "compact" ? "min-h-9" : "min-h-12", density === "compact" ? "" : "",
selected selected
? "bg-accent/80 shadow-[inset_3px_0_0_var(--primary)]" ? "bg-accent/80 shadow-[inset_3px_0_0_var(--primary)]"
: "hover:bg-accent/45" : "hover:bg-accent/45"
)} )}
style={{ display: "table-row" }}
> >
{/* Checkbox */} <div className="flex items-center justify-center" style={{ display: "table-cell", width: 36, verticalAlign: "middle" }} onClick={(e) => e.stopPropagation()}>
<span className="flex w-9 shrink-0 items-center justify-center" onClick={(e) => e.stopPropagation()}>
<input <input
type="checkbox" type="checkbox"
checked={batchIds.has(ticket.id)} checked={batchIds.has(ticket.id)}
onChange={() => toggleBatchId(ticket.id)} onChange={() => toggleBatchId(ticket.id)}
className="h-3.5 w-3.5 rounded border-border accent-primary" className="h-3.5 w-3.5 rounded border-border accent-primary"
/> />
</span> </div>
{availableColumns.filter((c) => c.visible).map((col) => { {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.")) { if (col.key.startsWith("cf.")) {
const cfKey = col.key.slice(3); const cfKey = col.key.slice(3);
const cfValue = ticket.custom_fields?.find((v) => v.custom_field?.key === cfKey || v.custom_field?.name === cfKey)?.value; const cfValue = ticket.custom_fields?.find((v) => v.custom_field?.key === cfKey || v.custom_field?.name === cfKey)?.value;
return ( 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 ?? "—"} {cfValue ?? "—"}
</span> </div>
); );
} }
switch (col.key) { switch (col.key) {
case "id": case "id":
return ( 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)} {formatTicketId(ticket.id)}
</span> </div>
); );
case "subject": case "subject":
return ( 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"> <span className="block truncate text-sm font-semibold text-foreground">
{ticket.subject} {ticket.subject}
</span> </span>
@@ -966,48 +976,49 @@ function TicketWorkbenchContent() {
Created {relativeTime(ticket.created_at)} Created {relativeTime(ticket.created_at)}
</span> </span>
)} )}
</span> </div>
); );
case "status": case "status":
return ( return (
<span key={col.key} className="shrink-0 px-3" style={{ width: col.width }}> <div key={col.key} style={cellStyle}>
<TicketStatusBadge status={ticket.status} /> <TicketStatusBadge status={ticket.status} />
</span> </div>
); );
case "queue": case "queue":
return ( 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)} {queueName(queues, ticket.queue_id)}
</span> </div>
); );
case "owner": case "owner":
return ( 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 ?? "—"} {ownerName ?? "—"}
</span> </div>
); );
case "created": case "created":
return ( 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)} {relativeTime(ticket.created_at)}
</span> </div>
); );
case "updated": case "updated":
return ( 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)} {relativeTime(ticket.updated_at)}
</span> </div>
); );
default: 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" /> <ChevronRightIcon className="h-4 w-4" />
</span> </div>
</button> </div>
); );
})} })}
</div>
</> </>
)} )}
</div> </div>