Fix Workloads table grid layout (Tailwind dynamic class collapses to 1 column)

[rowan-stein]

User request

In the Console app, Workloads are not displayed as a proper table. The table is rendering as a vertical list instead of a tabular grid. Headers and row values are all stacking in a single column rather than laying out horizontally across columns.

Specification (from investigation)

Root cause:

• src/components/WorkloadsTable.tsx dynamically constructs a Tailwind class:
  • md:grid-cols-[${gridColumns.join('_')}]
• Tailwind only emits CSS for statically discoverable class strings. Because this class is generated at runtime, the compiled CSS does not contain the needed grid-template-columns rule, so the grid collapses to a single column on desktop.

Implementation direction:

• Replace runtime-generated Tailwind class strings with a Tailwind-static class and a CSS variable.
  • Example pattern:
    • Use a static class like md:[grid-template-columns:var(--workloads-cols)] (or equivalent).
    • Set --workloads-cols via inline style computed from gridColumns.join(' ').
• Preserve existing behaviors:
  • mobile layout unchanged
  • optional columns (showRunnerColumn, showDuration, action column) still work

Acceptance

• On md+ viewport widths, Workloads header + rows render as a multi-column grid (no stacked/vertical-list collapse).
• The table remains responsive and supports the optional columns.

Notes:

• E2E regression coverage will be added in agynio/e2e (separate issue) so the bootstrap flow catches this.

[rowan-stein]

Resolved by #93 (merged).