From 5970e3fe9de55957bf1a9c48d0da54d0bf3a3d1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gjermund=20H=C3=B8s=C3=B8ien=20Wiggen?=
 <gjermund.wiggen@sikt.no>
Date: Tue, 9 Jun 2026 22:12:44 +0200
Subject: [PATCH] fix: resize adjusts both adjacent columns (left expands,
 right shrinks)

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>
---
 web/src/app/page.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 41fb0a4..6e6134b 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -68,7 +68,7 @@ const ALL_COLUMNS: ColumnConfig[] = [
 function baseColumns(): ColumnConfig[] {
   return [
     { 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: "queue", label: "Queue", width: 140, visible: true },
     { key: "owner", label: "Owner", width: 130, visible: true },
@@ -575,18 +575,26 @@ function TicketWorkbenchContent() {
       return next;
     });
   };
-  const handleColumnResize = (colKey: string, e: React.MouseEvent) => {
+  const handleColumnResize = (leftKey: string, rightKey: string | null, e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    setResizingCol(colKey);
+    setResizingCol(leftKey);
     const startX = e.clientX;
-    const col = columns.find((c) => c.key === colKey);
-    const startWidth = col?.width ?? 120;
+    const leftCol = columns.find((c) => c.key === leftKey);
+    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 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) =>
-        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 = () => {
@@ -894,13 +902,13 @@ function TicketWorkbenchContent() {
                       <div
                         key={col.key}
                         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 */}
                         {idx > 0 && (
                           <div
                             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">