From dd7bd867bfe9ec8dbfbb8f37ab7aa0311f06e8e6 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:01:48 +0200
Subject: [PATCH] fix: remove duplicate column header, portal column picker,
 clean widths

- Remove old fixed column header (was showing above dynamic one)
- Column picker now renders via createPortal (no longer behind elements)
- Remove forced inline widths on header and rows (flex naturally)
- Cleaner column header styling (subtle muted, no forced min-width)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/app/page.tsx | 69 ++++++++++++++++++++------------------------
 1 file changed, 31 insertions(+), 38 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 4201fa4..586f2fb 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -768,33 +768,6 @@ function TicketWorkbenchContent() {
                 >
                   <LayoutGridIcon className="h-4 w-4" />
                 </button>
-                {colPickerOpen && (
-                  <>
-                    <div className="fixed inset-0 z-40" onClick={() => setColPickerOpen(false)} />
-                    <div className="absolute right-0 top-full z-50 mt-1 w-48 rounded-md border border-border bg-card p-1 shadow-lg">
-                      {availableColumns.map((col) => {
-                        const isVisible = columns.find((c) => c.key === col.key)?.visible ?? col.visible;
-                        return (
-                          <button
-                            key={col.key}
-                            type="button"
-                            onClick={() => {
-                              setColumns((prev) =>
-                                prev.map((c) => c.key === col.key ? { ...c, visible: !c.visible } : c)
-                              );
-                            }}
-                            className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs text-foreground hover:bg-accent"
-                          >
-                            <span className={cn("text-xs", isVisible ? "text-primary" : "text-muted-foreground/30")}>
-                              {isVisible ? "✓" : "—"}
-                            </span>
-                            {col.label}
-                          </button>
-                        );
-                      })}
-                    </div>
-                  </>
-                )}
               </div>
             </div>
 
@@ -893,15 +866,6 @@ function TicketWorkbenchContent() {
       <div className="grid min-h-0 flex-1 grid-cols-1 xl:grid-cols-[minmax(0,1fr)_372px]">
         <section className="min-w-0 overflow-auto bg-card/48">
           <div className="min-w-[760px]">
-            <div className="sticky top-0 z-10 grid h-9 grid-cols-[112px_minmax(280px,1fr)_150px_132px_116px_40px] items-center border-b border-border bg-muted/80 px-5 text-[11px] font-semibold uppercase text-muted-foreground backdrop-blur">
-              <span>Ticket</span>
-              <span>Subject</span>
-              <span>Queue</span>
-              <span>Status</span>
-              <span>Updated</span>
-              <span />
-            </div>
-
             {filteredTickets.length === 0 ? (
               <div className="flex min-h-80 flex-col items-center justify-center px-5 text-center">
                 <div className="mb-3 flex h-11 w-11 items-center justify-center rounded-md border border-border bg-background">
@@ -923,7 +887,6 @@ function TicketWorkbenchContent() {
                   "sticky top-0 z-10 flex border-b border-border bg-muted/70",
                   density === "compact" ? "min-h-8" : "min-h-9"
                 )}
-                  style={{ width: availableColumns.filter((c) => c.visible).reduce((sum, c) => sum + c.width, 96), minWidth: "100%" }}
                 >
                   {availableColumns.filter((c) => c.visible).map((col) => (
                     <div
@@ -963,7 +926,6 @@ function TicketWorkbenchContent() {
                           ? "bg-accent/80 shadow-[inset_3px_0_0_var(--primary)]"
                           : "hover:bg-accent/45"
                       )}
-                      style={{ width: availableColumns.filter((c) => c.visible).reduce((sum, c) => sum + c.width, 96) + 36, minWidth: "100%" }}
                     >
                       {/* Checkbox */}
                       <span className="flex w-9 shrink-0 items-center justify-center" onClick={(e) => e.stopPropagation()}>
@@ -1523,6 +1485,37 @@ function TicketWorkbenchContent() {
         </>,
         document.body
       )}
+
+      {typeof document !== "undefined" && colPickerOpen && createPortal(
+        <>
+          <div className="fixed inset-0 z-[9998]" onClick={() => setColPickerOpen(false)} />
+          <div className="fixed z-[9999] w-48 rounded-md border border-border bg-card p-1 shadow-lg"
+            style={{ left: "calc(100% - 220px)", top: "72px" }}
+          >
+            {availableColumns.map((col) => {
+              const isVisible = columns.find((c) => c.key === col.key)?.visible ?? col.visible;
+              return (
+                <button
+                  key={col.key}
+                  type="button"
+                  onClick={() => {
+                    setColumns((prev) =>
+                      prev.map((c) => c.key === col.key ? { ...c, visible: !c.visible } : c)
+                    );
+                  }}
+                  className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs text-foreground hover:bg-accent"
+                >
+                  <span className={cn("text-xs", isVisible ? "text-primary" : "text-muted-foreground/30")}>
+                    {isVisible ? "✓" : "—"}
+                  </span>
+                  {col.label}
+                </button>
+              );
+            })}
+          </div>
+        </>,
+        document.body
+      )}
     </div>
   );
 }