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

fix: resize adjusts both adjacent columns (left expands, right shrinks)

Browse Source 
Left column gets wider, right column gets narrower by same amount.
Subject column now has fixed width (not flexible) so the table
doesn't redistribute space unpredictably.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Gjermund Høsøien Wiggen
2026-06-09 22:12:44 +02:00
parent 7f91a51e32
commit 5970e3fe9d
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -68,7 +68,7 @@ const ALL_COLUMNS: ColumnConfig[] = [
function baseColumns(): ColumnConfig[] { function baseColumns(): ColumnConfig[] {
return [ return [
{ key: "id", label: "ID", width: 100, visible: true }, { key: "id", label: "ID", width: 100, visible: true },
{ key: "subject", label: "Subject", width: 320, visible: true }, { key: "subject", label: "Subject", width: 400, visible: true },
{ key: "status", label: "Status", width: 120, visible: true }, { key: "status", label: "Status", width: 120, visible: true },
{ key: "queue", label: "Queue", width: 140, visible: true }, { key: "queue", label: "Queue", width: 140, visible: true },
{ key: "owner", label: "Owner", width: 130, visible: true }, { key: "owner", label: "Owner", width: 130, visible: true },
@@ -575,18 +575,26 @@ function TicketWorkbenchContent() {
return next; return next;
}); });
}; };
const handleColumnResize = (colKey: string, e: React.MouseEvent) => { const handleColumnResize = (leftKey: string, rightKey: string | null, e: React.MouseEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setResizingCol(colKey); setResizingCol(leftKey);
const startX = e.clientX; const startX = e.clientX;
const col = columns.find((c) => c.key === colKey); const leftCol = columns.find((c) => c.key === leftKey);
const startWidth = col?.width ?? 120; const rightCol = rightKey ? columns.find((c) => c.key === rightKey) : null;
const leftStart = leftCol?.width ?? 140;
const rightStart = rightCol?.width ?? 140;
const onMove = (ev: MouseEvent) => { const onMove = (ev: MouseEvent) => {
const newWidth = Math.max(50, Math.min(800, startWidth + (ev.clientX - startX))); const delta = ev.clientX - startX;
const newLeft = Math.max(50, Math.min(800, leftStart + delta));
const newRight = rightCol ? Math.max(50, Math.min(800, rightStart - delta)) : undefined;
setColumns((prev) => setColumns((prev) =>
prev.map((c) => (c.key === colKey ? { ...c, width: newWidth } : c)) prev.map((c) => {
if (c.key === leftKey) return { ...c, width: newLeft };
if (rightCol && c.key === rightCol.key) return { ...c, width: newRight! };
return c;
})
); );
}; };
const onUp = () => { const onUp = () => {
@@ -894,13 +902,13 @@ function TicketWorkbenchContent() {
<div <div
key={col.key} key={col.key}
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.key === "subject" ? undefined : 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 the 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-2 -ml-1 cursor-col-resize hover:bg-primary/40 z-10"
onMouseDown={(e) => handleColumnResize(arr[idx - 1].key, e)} onMouseDown={(e) => handleColumnResize(arr[idx - 1].key, col.key, e)}
/> />
)} )}
<span className="text-[10px] font-semibold uppercase text-muted-foreground/60 truncate block"> <span className="text-[10px] font-semibold uppercase text-muted-foreground/60 truncate block">