From 4714d510efb44ac4ec49d1758b1cbd078ff6e3aa Mon Sep 17 00:00:00 2001
From: Kumar Challa <chvvkumar@users.noreply.github.com>
Date: Tue, 7 Jul 2026 20:15:35 -0500
Subject: [PATCH 1/2] Align Equipment Inventory table columns across sections

The Cameras and Telescopes breakdowns each rendered as their own table, so the browser sized every column independently and the two sets of headers and values never lined up. Both tables now share a fixed layout with a pinned name column, so the columns align regardless of the content in either section. Right-aligned numeric cells also stop wrapping.
---
 frontend/src/components/DataTable.tsx          | 15 ++++++++++++++-
 frontend/src/components/EquipmentInventory.tsx |  3 ++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DataTable.tsx b/frontend/src/components/DataTable.tsx
index 0524067f..5427333f 100644
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -5,6 +5,9 @@ export interface DataTableColumn<T> {
   key: string;
   label: string;
   align?: "left" | "right";
+  /** Fixed column width (any CSS length/%), applied via <colgroup>. Requires the table
+   *  to use `table-fixed` (pass it through `class`) for widths to be honored. */
+  width?: string;
   /** Header becomes clickable and shows a sort arrow; click fires onSort(key). */
   sortable?: boolean;
   /** Column is always rendered, ignoring the visibility record. */
@@ -65,6 +68,16 @@ function DataTable<T>(props: DataTableProps<T>) {
 
   return (
     <table class={`w-full text-sm border-collapse${props.class ? ` ${props.class}` : ""}`}>
+      <Show when={visibleColumns().some((c) => c.width)}>
+        <colgroup>
+          <For each={visibleColumns()}>
+            {(col) => <col style={col.width ? { width: col.width } : undefined} />}
+          </For>
+          <Show when={props.columnPicker}>
+            <col />
+          </Show>
+        </colgroup>
+      </Show>
       <thead>
         <tr class="border-b border-theme-border-em text-theme-text-tertiary text-label uppercase tracking-wider">
           <For each={visibleColumns()}>
@@ -124,7 +137,7 @@ function DataTable<T>(props: DataTableProps<T>) {
                   >
                     <For each={visibleColumns()}>
                       {(col) => (
-                        <td class={`py-2 px-3 text-${col.align ?? "left"} text-theme-text-primary tabular-nums`}>
+                        <td class={`py-2 px-3 text-${col.align ?? "left"} text-theme-text-primary tabular-nums${col.align === "right" ? " whitespace-nowrap" : ""}`}>
                           {col.render(row)}
                         </td>
                       )}
diff --git a/frontend/src/components/EquipmentInventory.tsx b/frontend/src/components/EquipmentInventory.tsx
index 3be6ce5e..bf43deeb 100644
--- a/frontend/src/components/EquipmentInventory.tsx
+++ b/frontend/src/components/EquipmentInventory.tsx
@@ -8,6 +8,7 @@ const EquipmentTable: Component<{ title: string; items: EquipmentItem[] }> = (pr
     {
       key: "name",
       label: props.title,
+      width: "20%",
       render: (item) => (
         <>
           {item.name}
@@ -67,7 +68,7 @@ const EquipmentTable: Component<{ title: string; items: EquipmentItem[] }> = (pr
         columns={columns}
         rows={props.items}
         rowKey={(item) => item.name}
-        class="text-xs"
+        class="table-fixed text-xs"
         emptyMessage="No equipment data"
       />
     </div>

From 409cb748c5253568108664f30b957a0a057517c7 Mon Sep 17 00:00:00 2001
From: Kumar Challa <chvvkumar@users.noreply.github.com>
Date: Tue, 7 Jul 2026 20:41:04 -0500
Subject: [PATCH 2/2] Soften Statistics chart bars to 80% accent opacity

The Top Targets and Imaging Activity bars filled at the full accent
color, the same saturated hue used for links and controls, so as large
solid shapes they overpowered the muted surfaces on every theme. Drop
the fills to 80% accent opacity so they read as data rather than UI
chrome, and brighten the timeline bars to full opacity on hover.
---
 frontend/src/components/ImagingTimeline.tsx | 2 +-
 frontend/src/components/TopTargets.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ImagingTimeline.tsx b/frontend/src/components/ImagingTimeline.tsx
index 64a9f5de..e80b1b8d 100644
--- a/frontend/src/components/ImagingTimeline.tsx
+++ b/frontend/src/components/ImagingTimeline.tsx
@@ -415,7 +415,7 @@ const ImagingTimeline: Component<Props> = (props) => {
                     </Show>
                     {/* Bar */}
                     <div
-                      class={`w-full rounded-t ${isEmpty() ? "" : "bg-theme-accent hover:opacity-80 cursor-pointer"}`}
+                      class={`w-full rounded-t ${isEmpty() ? "" : "bg-theme-accent/80 hover:opacity-100 cursor-pointer"}`}
                       style={{ height: isEmpty() ? "0px" : `${Math.max(pct(), 1)}%`, "min-height": isEmpty() ? "0" : "2px", transition: "height 300ms ease" }}
                       title={!isEmpty() ? `${formatLabel(entry.period, granularity())}: ${formatHours(entry.integration_seconds)}` : undefined}
                       onClick={() => !isEmpty() && handleBarClick(entry)}
diff --git a/frontend/src/components/TopTargets.tsx b/frontend/src/components/TopTargets.tsx
index e4cc2fb0..97a0267a 100644
--- a/frontend/src/components/TopTargets.tsx
+++ b/frontend/src/components/TopTargets.tsx
@@ -18,7 +18,7 @@ const TopTargets: Component<{ targets: TopTarget[] }> = (props) => {
             <div class="flex items-center gap-2 pl-6">
               <div class="flex-1 bg-theme-base rounded-full h-3 overflow-hidden">
                 <div
-                  class="bg-theme-accent h-3 rounded-full"
+                  class="bg-theme-accent/80 h-3 rounded-full"
                   style={{ width: `${(target.integration_seconds / maxVal()) * 100}%` }}
                 />
               </div>