Factory: Optimize layout by combining data sections into 2-column rows on desktop

[mrbobbytables]

Fixes #1054

Summary of Changes

1. Live Dashboard Section: Grouped Governor and System Health into a 2-column layout when registry health checks are present.
2. Images Panels: Paired "Freshness brackets" and "Availability by family" in a single 2-column row on desktop.
3. Builds Panels: Divided "Recent Terminal Runs" into two columns of tables to optimize vertical space on desktop.
4. Tests Panels - Triage List: Made .triageList use a 2-column responsive grid on desktop.
5. Tests Panels - Sparkline Grid: Increased sparkline grid min-width from 280px to 340px for comfortable rendering.
6. Tests Panels - Recent Runs: Divided "Recent runs" into two columns of tables on desktop.
7. Applications Panels: Paired "Bluefin Flathub downloads by base version" and "Bluefin vs peer desktops" in a 2-column row on desktop.
8. Metrics Panels - Homebrew Rankings: Assigned 3 distinct colors to differentiate Bluefin vs macOS vs other Linux distributions.
9. Hive Task Leaderboard: Increased card min-width from 180px to 220px in .hiveTaskGrid to prevent badges and usernames from wrapping awkwardly.
10. Factory Trends: Preserved Factory Trends in a clean, full-width single row.

— hive: backend=copilot model=gemini-3.8-flash

🐝 Hive Agent: contributor | SHA: 54397e08

[hanthor]

No regression. One narrow-viewport risk and one duplication note.

Merged into current main, green and unchanged:

$ npm run test:coverage   # origin/main + pr1228
ℹ tests 925
ℹ pass 925
ℹ fail 0

Identical to the unmodified-main baseline (925 / 925 / 0), as expected for a CSS/TSX layout change. Build Docusaurus is green on the PR too.

1. minmax(360px, 1fr) overflows below ~360px viewports

The new two-column rows are built with:

/* panels.module.css and ApplicationsPanels.module.css */
.twoCol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  ...
}

auto-fit collapses to a single track once two do not fit, but the track itself keeps its 360px minimum. On a 320-360px viewport the column stays 360px wide and the dashboard scrolls horizontally. There are no @media queries in either of these module files to catch it:

$ grep -n "@media" src/components/factory/panels/panels.module.css \
    src/components/factory/panels/ApplicationsPanels.module.css \
    src/components/factory/panels/ImagesPanels.module.css
(no output)

The usual fix is repeat(auto-fit, minmax(min(360px, 100%), 1fr)), which behaves identically on desktop and clamps on phones.

This applies to the bumped existing tracks too — .triageList gains minmax(360px, 1fr) where items previously stacked, and .sparklineGrid goes 280px → 340px. In fairness the repo already ships minmax(400px elsewhere and does not use min() anywhere, so this PR is consistent with existing practice rather than introducing the pattern. Flagging it because this PR triples the number of places it appears.

2. .twoCol is defined twice, identically

Byte-identical blocks land in both panels.module.css and ApplicationsPanels.module.css (modulo one margin-bottom). Since these are CSS modules the duplication is invisible at runtime, but the two copies will drift. panels.module.css already looks like the shared sheet for this directory — worth keeping one definition there and importing/composing it.

3. .hiveTaskGrid bump is unexplained

HiveFactoryDashboard.module.css goes minmax(180px, 1fr) → minmax(220px, 1fr), which is the one change not obviously part of "combine data sections into 2-column rows". Probably intentional tuning; a line in the description would save the next reader the detour.

---

Generated by Claude Code