diff --git a/client/src/Pages/Dashboard/Components/CardPrimitives.tsx b/client/src/Pages/Dashboard/Components/CardPrimitives.tsx index 497d91ec3..a2452fd3a 100644 --- a/client/src/Pages/Dashboard/Components/CardPrimitives.tsx +++ b/client/src/Pages/Dashboard/Components/CardPrimitives.tsx @@ -10,10 +10,12 @@ import { typographyLevels } from "@/Utils/Theme/Palette"; import type { ReactNode } from "react"; -/** Thin enough to read as a proportion indicator, not a progress bar. */ -const BAR_HEIGHT = 4; -/** The segmented bar carries more meaning, so it gets a little more presence. */ -const SEGMENTED_BAR_HEIGHT = 8; +/** + * One thickness for every bar on the dashboard. Plain and segmented bars sit + * side by side across cards, so differing weights read as an inconsistency + * rather than as emphasis. + */ +const BAR_HEIGHT = 8; export interface BarSegment { key: string; @@ -73,7 +75,7 @@ export const CardSegmentedBar = ({ segments }: { segments: BarSegment[] }) => { { - const placed: PlacedCard[] = cards.map((card) => ({ - card, - renderedWidth: card.width, - })); - - // Columns occupied in the row still open once every card is placed. A - // trailing half-width card leaves exactly HALF_WIDTH here. - const trailing = placed.reduce( - (used, entry) => (used + entry.renderedWidth) % GRID_COLUMNS, - 0 - ); - - const last = placed[placed.length - 1]; - if (last && trailing === HALF_WIDTH) { - last.renderedWidth = GRID_COLUMNS; - } - - return placed; -}; +export const layoutCards = (cards: CardDefinition[]): PlacedCard[] => + cards.map((card) => ({ card, renderedWidth: card.width })); diff --git a/client/src/Pages/Dashboard/registry.ts b/client/src/Pages/Dashboard/registry.ts index 2aaddb125..ddbdb7930 100644 --- a/client/src/Pages/Dashboard/registry.ts +++ b/client/src/Pages/Dashboard/registry.ts @@ -26,14 +26,14 @@ import type { CardDefinition, CardId } from "./cards"; // // Order is the render order, and the order the picker lists them in. // -// Full width is reserved for Monitor status alone, which lays six counts across -// a single row. Every other card is half-width and pairs up down the page. +// Every card is half-width and pairs up down the page. The grid promotes a +// lone trailing card to full width so the page does not end on a ragged half. export const CARD_REGISTRY: CardDefinition[] = [ { id: "monitorStatus", key: "monitorStatus", group: "uptime", - width: 12, + width: 6, component: MonitorStatusCard, }, {