Improved UI and Equipment Inventory Layout

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>
                       )}

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>

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)}

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>