elements (Properties, Manage Units, Utilities
readings) and the mobile column-hiding on other list pages
still need more room than phones/most laptops have. Rather
than clip columns (and the Actions/Edit/Delete buttons in
them) completely, let the containing card scroll
horizontally so nothing is ever unreachable. ── */
@media (max-width: 1300px) {
.card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.prop-table, .unit-table, .readings-table { min-width: 700px; }
}
/* ── Phones only: turn tables into stacked cards ──────────────
Horizontal scrolling a data table inside a page that already
scrolls vertically isn't an obvious or reliable gesture on a
phone. Below 700px, drop the table layout entirely and stack
each row as a labeled card instead — the same treatment the
Tenants page uses. Each
needs a data-label="..." attribute
(set by the page's JS) so its column name can show inline. ── */
@media (max-width: 700px) {
.prop-table, .unit-table, .readings-table { min-width: 0 !important; }
.prop-table, .unit-table, .readings-table,
.prop-table tbody, .unit-table tbody, .readings-table tbody,
.prop-table tr, .unit-table tr, .readings-table tr,
.prop-table td, .unit-table td, .readings-table td {
display: block; width: 100%;
}
.prop-table thead, .unit-table thead, .readings-table thead,
.readings-table tfoot { display: none; }
.prop-table tr, .unit-table tr, .readings-table tr {
padding: var(--sp-md) 0;
border-bottom: 1px solid var(--clr-border);
}
.prop-table td, .unit-table td, .readings-table td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-md);
padding: var(--sp-md) var(--sp-md) !important;
border-bottom: none !important;
text-align: right;
}
.prop-table td::before, .unit-table td::before, .readings-table td::before {
content: attr(data-label);
font-size: 0.75rem; font-weight: 700; color: var(--clr-muted);
text-transform: uppercase; letter-spacing: 0.04em;
flex-shrink: 0; text-align: left;
}
}
/* ── Mobile nav drawer: size the nav icons ────────────────────
These icons are raw inline