/* Responsive table reflow. Replaces the old server-side "mobile card" template (table_cards.html, viewport_layout cookie, ?layout= query param) — the backend now always renders exactly one table markup (table_rows.html, table_row.html, table_rows_scoped.html, table_fragment_vanilla.html), and this media query alone restacks it below the breakpoint. No cookie, no resize listener, no server-side guess to go stale. .cell-primary/.cell-subtitle/.cell-badge and each 's data-label come from the row-hierarchy hints computed in server/utils/field_config_loader.py's get_row_hierarchy_config() (title/ subtitle/badge field picks, either explicit via a model's mobile: YAML block or auto-derived). .hide-mobile is applied when that same YAML block also narrows the field list (e.g. cpm5's PlantDetail mobile: profile shows only 3 of its 10 default columns) — everything else stays visible. 768px matches the remaining live matchMedia() checks elsewhere in the app (table_action_bar.html's popup-vs-fullpage-form decision, child-data-tabs.js's tab-count limit) so all "is this mobile" logic agrees on one breakpoint. Deliberately kept in its OWN small file rather than folded into app-consolidated.css: that file is a 900+ line stylesheet built for a different template family (unified_base.html/docs portal) with several broad, !important-heavy rules (blanket .hidden, .inline-table-container borders/backgrounds, .table-row.selected overrides) that were never designed to apply to list.html/report_base.html/dashboard.html/etc. This file must be linked in every base template that can host a table via HTMX swap (menu navigation only swaps #content-area, never ), same reasoning as row-click-handler.js/TableManager.js/theme-picker.js. */ @media (max-width: 768px) { .responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; } .responsive-table tr { height: auto !important; /* overrides the inline style="height: Npx" baked in at render time */ padding: 0.75rem 1rem; margin-bottom: 0.75rem; border: 1px solid rgb(var(--c-rule, 209 213 219)); border-radius: 0.5rem; } .responsive-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0 !important; white-space: normal !important; border: none; } .responsive-table td::before { content: attr(data-label); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; color: rgb(var(--c-muted, 107 114 128)); flex-shrink: 0; } .responsive-table td.cell-primary { font-weight: 600; font-size: 1rem; order: -3; } .responsive-table td.cell-primary::before { content: none; } .responsive-table td.cell-subtitle { order: -2; } .responsive-table td.cell-subtitle::before { content: none; } .responsive-table td.cell-badge { order: -1; } .responsive-table td.hide-mobile { display: none; } /* Card-focus mode: TableManager.updateMobileCardVisibility() (TableManager.js) adds .has-row-selected to the table whenever any row is selected, so a tap on one card hides its siblings; tapping the selected card again clears the selection classes (existing toggle logic in TableManager.selectRow), which removes .has-row-selected and brings the rest back. */ .responsive-table.has-row-selected tr:not(.selected-row-main):not(.selected-row-scoped) { display: none; } }