From b59beb9ab48a9436f4cc5fe25b3ecb16043ae890 Mon Sep 17 00:00:00 2001 From: Atanas Himchev Date: Tue, 15 Sep 2026 17:59:49 +0300 Subject: [PATCH] ui: the generated dashboard takes the shape of what each tile holds (#7412) The dashboard's tiles were assembled by hand inside the card rather than from it: the label a hbox of uppercase utility classes in the header, the value a bare

in the content, the hint a second paragraph under it. The card's own description, title, action and footer slots went unused, and each block was headed by a hand-rolled uppercase eyebrow row. There are two card shapes, because the reference has two. A NUMBER tile uses the slots it was ignoring - description for the label, title for the value, an icon avatar in the action, the hint in the footer. Everything carrying content of its own - a top-N table, an embedded report preview, a custom page - takes the reference's table-card shape instead: a plain title over its description, a border-b header, and x-h-card-content.flush, since Harmonia 3 moved padding off the card surface onto the slots, so a table meant to span the card edge to edge is the flush modifier now, not a cancelled padding. Navigation moves off the title and onto a labelled "View all" button: a @click on a

is reachable by neither keyboard nor screen reader. Key Indicators is grouped by the shape a widget renders as. A scalar is a compact number tile and a list is a top-N table; sharing one grid, the wide list tiles left holes around the narrow ones, so each kind gets a row - summaryKpis and listKpis on dashboardPage. A report preview tile takes the shape of what the embedded page actually draws. The .report has carried a chart type all along and the reports store simply did not read it, so every preview was framed as a table; a report declaring chart: renders its chart surface and wants the reference's padded, borderless chart card, while a report without one renders rows and wants the bordered full-bleed table card. The chart tile is also given a taller frame, which is not cosmetic: the report page sizes that surface in vh, and inside an iframe vh resolves against the FRAME, so a short frame squashed a chart that fills the window on the report page itself. The rows inside a preview are framed by the tile's card, so the embedded page drops its own gutter, box and grid lines when it is previewed - gated on the preview flag, leaving the report a user opens byte-identical. The container's data-border is read ONCE as the directive initializes, where it only adds `border rounded-md`, so the preview branch sets those classes directly instead of binding the attribute and racing Alpine's directive order; data-borders is a pure CSS hook and does bind. Preview mode has exactly two callers, this dashboard and the platform application shell's, so the change cannot reach a report page. The blocks lose their headings. Every tile names itself, so a heading above them only repeated what the cards already said, and the reference's dashboard is likewise bare grids separated by the page's own gap. The page's own

Dashboard

goes too, and breadcrumbTrail returns a Dashboard crumb instead of an empty trail - the dashboard now names itself where every other page does, rather than being the one route whose breadcrumb was a bare home icon. A tile's hint rides x-if rather than x-show, and so does the spacer above it. The header pads its own bottom only while nothing but a