stacks as a card with labels from the corresponding | .
Works for any `.tbl` (no markup change needed); supply data-label attrs
on | if a column should keep a custom mobile label. */
@media (max-width: 640px) {
.card { overflow: visible; } /* override the horizontal-scroll override */
.card .tbl { min-width: 0; }
.tbl, .tbl thead, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; }
.tbl thead { position: absolute; left: -9999px; } /* hide headers; we'll inline-label rows */
.tbl tr {
background: var(--sage-3);
border: 1px solid var(--line-sage);
border-radius: 16px;
padding: 14px 16px;
margin-bottom: 12px;
box-shadow: 0 1px 0 rgba(3,11,17,0.02);
}
.bg-navy .tbl tr { background: var(--navy-3, rgba(192,208,192,0.04)); border-color: var(--line-navy); }
.tbl td {
border: 0;
padding: 6px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
text-align: right;
font-size: 13px;
}
.tbl td.right, .tbl td[class*="right"] { text-align: right; }
.tbl td::before {
content: attr(data-label);
font-family: var(--f-mono);
font-size: 11px;
color: var(--ink-2);
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: left;
flex: 0 0 auto;
}
.bg-navy .tbl td::before { color: var(--on-navy-2); }
/* first cell = the "name" — full-width header inside the card */
.tbl td:first-child {
border-bottom: 1px dashed var(--line-sage);
padding-bottom: 10px;
margin-bottom: 6px;
font-size: 16px;
}
.bg-navy .tbl td:first-child { border-bottom-color: var(--line-navy); }
.tbl td:first-child::before { display: none; }
/* an empty last cell with just an action button should sit on its own row */
.tbl td:last-child { justify-content: flex-end; padding-top: 8px; }
.tbl td:empty { display: none; }
}
/* ---------- modal: drag-handle visual cue (bottom-sheet on phone) ---------- */
@media (max-width: 600px) {
.modal-card { position: relative; padding-top: 32px; }
.modal-card::before {
content: '';
position: absolute;
top: 10px; left: 50%;
transform: translateX(-50%);
width: 42px; height: 4px;
border-radius: 999px;
background: rgba(3, 11, 17, 0.18);
}
.bg-navy .modal-card::before { background: rgba(192, 208, 192, 0.28); }
.modal-card { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}
/* ---------- collapse rigid inline grid forms to 1 col on phones ----------
Many pages set `style="display:grid;grid-template-columns:repeat(4,1fr)"`
on quick-add forms. Override per-screen-size without editing each file. */
@media (max-width: 720px) {
form[style*="grid-template-columns"],
div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
form[style*="grid-template-columns"] button[type="submit"],
div[style*="grid-template-columns"] button[type="submit"] {
width: 100%;
}
}
/* ---------- spread / row utility responsive ---------- */
@media (max-width: 640px) {
.spread { flex-wrap: wrap; gap: 16px; }
.spread > div:first-child { width: 100%; }
.spread .row { width: 100%; flex-wrap: wrap; gap: 8px; }
.spread .row > * { flex: 1 1 calc(50% - 4px); }
.spread .row > a, .spread .row > button { min-height: 44px; justify-content: center; display: inline-flex; align-items: center; }
.row { flex-wrap: wrap; }
}
/* ---------- bigger tap targets on phone ---------- */
@media (max-width: 600px) {
a, button, .pill-navy, .pill-sage, .btn-outline-sage, .btn-outline-navy {
-webkit-tap-highlight-color: rgba(3, 11, 17, 0.05);
}
/* the small inline action buttons inside tables should still feel pressable */
.tbl button, .tbl a.mono { min-height: 36px; padding: 8px 14px; font-size: 13px; }
}
/* ---------- dashboard grid: single column on phones, 2-col on tablets ---------- */
@media (max-width: 720px) {
.dash-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-grid .col-3, .dash-grid .col-4, .dash-grid .col-6 { grid-column: span 1; }
}
@media (max-width: 480px) {
.dash-grid { grid-template-columns: 1fr; }
.dash-grid .num { font-size: 32px !important; }
}
/* ---------- avatar menu: full-width sheet on small phones ---------- */
@media (max-width: 480px) {
.app-menu {
position: fixed;
inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px;
min-width: 0;
border-radius: 18px;
box-shadow: 0 24px 60px rgba(3, 11, 17, 0.30);
}
.app-menu a, .app-menu button { padding: 14px 18px; font-size: 15px; }
}
/* ---------- filter input + count on phone ---------- */
@media (max-width: 600px) {
.list-filter { width: 100%; }
.list-filter input { width: 100%; }
}
/* ---------- pin/install pill, install button visibility on phone ---------- */
@media (max-width: 720px) {
.app-install .lbl { display: none; } /* icon-only on phone */
.app-install { padding: 8px; min-width: 38px; min-height: 38px; justify-content: center; }
}
/* ---------- chat full-bleed on phone ---------- */
@media (max-width: 600px) {
.owl-fab { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
.owl-fab-panel { width: calc(100vw - 16px); right: 8px; bottom: 76px; max-height: calc(100vh - 100px); border-radius: 22px; }
}
/* ---------- a couple of base resets that pay off on phone ---------- */
* { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
/* viewport-safe bottom padding for fixed bottom UI */
@media (max-width: 600px) {
body.app-shell { padding-bottom: env(safe-area-inset-bottom); }
}
|