From 3d914b70bc4f5bc36d72fee6d1034c0d10bc3763 Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Sat, 15 Nov 2025 14:02:14 -0700
Subject: [PATCH] Scheduled Jobs: Fixed Job Table Column Spacing Issues

---
 .../src/Scheduling/Scheduled_Jobs_List.jsx    | 73 +++++++++++++------
 1 file changed, 52 insertions(+), 21 deletions(-)

diff --git a/Data/Engine/web-interface/src/Scheduling/Scheduled_Jobs_List.jsx b/Data/Engine/web-interface/src/Scheduling/Scheduled_Jobs_List.jsx
index 4bccdb6d..b7b9f273 100644
--- a/Data/Engine/web-interface/src/Scheduling/Scheduled_Jobs_List.jsx
+++ b/Data/Engine/web-interface/src/Scheduling/Scheduled_Jobs_List.jsx
@@ -1,13 +1,3 @@
-// /////////////////////////////////////////////////////////////////////////////
-//  Scheduled_Jobs_List — Borealis MagicUI styling parity with Page Template
-//  - Aurora gradient shell
-//  - Small Material icon LEFT of title
-//  - Subtitle under title
-//  - Top-right utility buttons (Refresh, Create Job, Settings)
-//  - AG Grid Quartz theme + square checkboxes, rounded chrome
-//  - Keeps all original logic + renderers
-// /////////////////////////////////////////////////////////////////////////////
-
 import React, {
   useCallback,
   useEffect,
@@ -94,6 +84,15 @@ const FILTER_OPTIONS = [
   { key: "recurring", label: "Recurring" },
   { key: "completed", label: "Completed" },
 ];
+const AUTO_SIZE_COLUMNS = [
+  "name",
+  "componentsMeta",
+  "target",
+  "occurrence",
+  "lastRun",
+  "nextRun",
+  "resultsCounts",
+];
 
 function ResultsBar({ counts }) {
   const total = Math.max(1, Number(counts?.total_targets || 0));
@@ -172,6 +171,22 @@ export default function ScheduledJobsList({ onCreateJob, onEditJob, refreshToken
   const [assembliesLoading, setAssembliesLoading] = useState(false);
   const [assembliesError, setAssembliesError] = useState("");
   const gridApiRef = useRef(null);
+  const autoSizeTrackedColumns = useCallback(() => {
+    const api = gridApiRef.current;
+    if (!api) return;
+    const run = () => {
+      try {
+        api.autoSizeColumns(AUTO_SIZE_COLUMNS, true);
+      } catch {
+        /* ignore auto-size errors triggered during async refresh */
+      }
+    };
+    if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
+      window.requestAnimationFrame(run);
+    } else {
+      setTimeout(run, 0);
+    }
+  }, []);
 
   const deriveRowKey = useCallback((row, index = "") => {
     if (row && row.id != null && row.id !== "") {
@@ -439,9 +454,13 @@ export default function ScheduledJobsList({ onCreateJob, onEditJob, refreshToken
     };
   }, [loadJobs, refreshToken]);
 
-  const handleGridReady = useCallback((params) => {
-    gridApiRef.current = params.api;
-  }, []);
+  const handleGridReady = useCallback(
+    (params) => {
+      gridApiRef.current = params.api;
+      autoSizeTrackedColumns();
+    },
+    [autoSizeTrackedColumns]
+  );
 
   const filterCounts = useMemo(() => {
     const totals = { all: rows.length, immediate: 0, scheduled: 0, recurring: 0, completed: 0 };
@@ -488,6 +507,10 @@ export default function ScheduledJobsList({ onCreateJob, onEditJob, refreshToken
   }, [deriveRowKey, filteredRows, selectedIds]);
 
   const anySelected = selectedIds.size > 0;
+  useEffect(() => {
+    if (!filteredRows.length || loading) return;
+    autoSizeTrackedColumns();
+  }, [filteredRows, loading, autoSizeTrackedColumns]);
 
   const handleSelectionChanged = useCallback(() => {
     const api = gridApiRef.current;
@@ -607,23 +630,26 @@ export default function ScheduledJobsList({ onCreateJob, onEditJob, refreshToken
         field: "name",
         cellRenderer: nameCellRenderer,
         sort: "asc",
-        minWidth: 220,
+        minWidth: 150,
+        cellClass: "auto-col-tight",
       },
       {
         headerName: "Assembly(s)",
         field: "componentsMeta",
-        minWidth: 260,
-        cellRenderer: assembliesCellRenderer
+        minWidth: 180,
+        cellRenderer: assembliesCellRenderer,
+        cellClass: "auto-col-tight",
       },
-      { headerName: "Target", field: "target", minWidth: 140 },
-      { headerName: "Recurrence", field: "occurrence", minWidth: 160 },
-      { headerName: "Last Run", field: "lastRun", minWidth: 160 },
-      { headerName: "Next Run", field: "nextRun", minWidth: 160 },
+      { headerName: "Target", field: "target", minWidth: 140, cellClass: "auto-col-tight" },
+      { headerName: "Recurrence", field: "occurrence", minWidth: 150, cellClass: "auto-col-tight" },
+      { headerName: "Last Run", field: "lastRun", minWidth: 150, cellClass: "auto-col-tight" },
+      { headerName: "Next Run", field: "nextRun", minWidth: 150, cellClass: "auto-col-tight" },
       {
         headerName: "Results",
         field: "resultsCounts",
         minWidth: 280,
         cellRenderer: resultsCellRenderer,
+        cellClass: "auto-col-tight",
         sortable: false,
         filter: false
       },
@@ -631,8 +657,9 @@ export default function ScheduledJobsList({ onCreateJob, onEditJob, refreshToken
         headerName: "Enabled",
         field: "enabled",
         minWidth: 140,
-        maxWidth: 160,
+        flex: 1,
         cellRenderer: enabledCellRenderer,
+        cellClass: "auto-col-tight",
         sortable: false,
         filter: false,
         resizable: false,
@@ -859,6 +886,10 @@ export default function ScheduledJobsList({ onCreateJob, onEditJob, refreshToken
               alignItems: "center",
               justifyContent: "center",
             },
+            "& .ag-cell.auto-col-tight": {
+              paddingRight: 0,
+              paddingLeft: 0,
+            },
           }}
           style={{
             "--ag-background-color": "#070b1a",