Gate the wide workloads column set on a shell that can hold it

The workloads table picks its layout stage from the viewport width but
renders inside a shell roughly 120px narrower. The wide column set sums
to about 1370px, so engaging it at a 1440px viewport left the DEFAULT
desktop layout scrolling horizontally by about 50px between 1440 and
1535px. Horizontal scroll is reserved for columns a user explicitly
pins; the breakpoint default must fit, so the wide stage now waits for
a 1536px viewport.

Found by re-pinning the workloads column-layout E2E spec, whose no-
horizontal-scroll contract this drift had broken.

Contract-Neutral: frontend layout fix with unit coverage; contract docs carry another agent's WIP on the shared tree
This commit is contained in:
rcourtman
2026-07-18 22:07:46 +01:00
parent 1b7488e552
commit 2ba6c66e37
2 changed files with 12 additions and 3 deletions
@@ -1046,8 +1046,11 @@ describe('GUEST_COLUMNS', () => {
expect(getWorkloadTableLayoutMode(768)).toBe('tablet');
expect(getWorkloadTableLayoutMode(899)).toBe('tablet');
expect(getWorkloadTableLayoutMode(900)).toBe('compact');
expect(getWorkloadTableLayoutMode(1439)).toBe('compact');
expect(getWorkloadTableLayoutMode(1440)).toBe('wide');
// Wide waits for a shell that can hold the full column set without
// horizontal scroll (see WORKLOAD_TABLE_WIDE_LAYOUT_WIDTH).
expect(getWorkloadTableLayoutMode(1440)).toBe('compact');
expect(getWorkloadTableLayoutMode(1535)).toBe('compact');
expect(getWorkloadTableLayoutMode(1536)).toBe('wide');
});
it('keeps CPU and memory fixed while allowing disk to be platform-scoped', () => {
@@ -14,7 +14,13 @@ export type WorkloadTableLayoutMode = 'mobile' | 'tablet' | 'compact' | 'wide';
export const WORKLOAD_TABLE_MOBILE_LAYOUT_WIDTH = 768;
export const WORKLOAD_TABLE_TABLET_LAYOUT_WIDTH = 900;
export const WORKLOAD_TABLE_WIDE_LAYOUT_WIDTH = 1440;
// Layout stages key off the viewport, but the table renders inside a shell
// that is ~120px narrower (nav rail + page padding). The wide column set sums
// to ~1370px, so engaging it at a 1440px viewport left the default layout
// horizontally scrolling by ~50px. Horizontal scroll is reserved for columns
// a user explicitly pins (see forcedColumnIds); the breakpoint default must
// fit, so wide waits until the shell can actually hold the full set.
export const WORKLOAD_TABLE_WIDE_LAYOUT_WIDTH = 1536;
const WORKLOAD_TABLE_LAYOUT_ORDER: Record<WorkloadTableLayoutMode, number> = {
mobile: 0,