/* mobile.css — PR-MOBILE-RESPONSIVE (2026-08-03)
*
* Cross-cutting phone / coarse-tablet fixes for the main SPA (index.html).
* Everything is scoped to html[data-ui-mode="mobile"] — the codebase's
* established responsive hook (ui-mode.js sets it on a coarse pointer or a
* <=900px window, and its own header comment says "All my responsive CSS
* keys off html[data-ui-mode='mobile']"). This file is loaded LAST in the
* so, at equal specificity, its rules win by source order over the
* body[data-ui-version="ascut"] variants in app.css / shell.css.
*
* Scope of THIS pass (Phase 2, increment 1): the confirmed overflow / cram
* offenders from the responsive audit. Every rule here only ever makes an
* element NARROWER or reflows a cramped grid — none change fixed-chrome
* geometry, so desktop is untouched and there's no notch/safe-area risk.
*
* Deliberately NOT in this pass (needs on-device testing):
* • viewport-fit=cover + env(safe-area-inset-*) for notched phones
* • per-table horizontal-scroll wrappers (needs HTML, or the .cust-grid
* row-stack pattern applied table by table)
* • tap-to-select on the 2D floor-plan fallback
*/
/* 1. Stop the whole page from sliding sideways when a single child
* overflows — contain horizontal drift to the offending element. */
html[data-ui-mode="mobile"] #app-workspace { overflow-x: hidden; }
/* 2. KPI strip defaults to a 6-column grid — unreadable at ~65px/card on a
* phone. Drop to 2 columns, then 1 on the narrowest handsets. */
html[data-ui-mode="mobile"] .kpi-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 430px) {
html[data-ui-mode="mobile"] .kpi-strip { grid-template-columns: 1fr; }
}
/* 3. Home "studio" card grid is capped at 560px and defaults to a wide
* layout — let it fill the phone and reflow to 2 (then 1) columns. */
html[data-ui-mode="mobile"] .hub-studio-cards {
max-width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 430px) {
html[data-ui-mode="mobile"] .hub-studio-cards { grid-template-columns: 1fr; }
}
/* 4. Modals / dialogs use fixed max-widths (e.g. .bulk-edit-modal 560px)
* that overflow a 390px screen. Cap every dialog to the viewport — a
* max-width cap can only shrink, never widen, so this is safe on any
* already-responsive dialog. Height caps to the stable viewport so the
* iOS URL bar can't push the footer off-screen. */
html[data-ui-mode="mobile"] .bulk-edit-modal,
html[data-ui-mode="mobile"] .modal,
html[data-ui-mode="mobile"] .dialog {
max-width: calc(100vw - 16px);
max-height: calc(var(--vh-stable, 100vh) - 24px);
}
/* 5. Toasts have a 240px min-width and 380px max — both can overflow a
* narrow phone. Release the min and cap to the viewport. */
html[data-ui-mode="mobile"] .toast {
min-width: 0;
max-width: calc(100vw - 20px);
}
/* 6. Topbar search box carries a fixed max-width that can push the topbar
* wider than the screen. Let it shrink to fit. (The separate
* .global-search already hides itself under 800px.) */
html[data-ui-mode="mobile"] #app-topbar .topbar-search {
max-width: 100%;
min-width: 0;
}
/* 7. Job lists (cabinet dash #cab-dash + door orders #d-orders): the name/date
* row is a single flex line. On a narrow phone the fixed date column can
* crush the name to an empty ellipsis. Let the row wrap and give the NAME
* its own full-width line so it's always readable; the date drops below. */
html[data-ui-mode="mobile"] #cab-dash .dash-job,
html[data-ui-mode="mobile"] #d-orders .dash-job {
flex-wrap: wrap;
row-gap: 2px;
}
html[data-ui-mode="mobile"] #cab-dash .dash-job-name,
html[data-ui-mode="mobile"] #d-orders .dash-job-name {
flex: 1 1 100%;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
html[data-ui-mode="mobile"] #cab-dash .dash-job-when,
html[data-ui-mode="mobile"] #d-orders .dash-job-when {
flex: 0 0 auto;
}
/* 8. MAIN JOB TABLES — the real fix for "job names hidden on ecab & door side".
* .jobs-table is `table-layout:fixed` with 7 columns (app.css:1354); on a
* ~390px phone the 26-28% name column collapses to ~40px and the name
* (`white-space:nowrap;overflow:hidden;text-overflow:ellipsis`) truncates to
* an empty ellipsis. Two treatments below.
*
* 8a. CABINET table (#cab-dash) — clean 7-col 1:1 layout. Hide the low-value
* columns on a phone so the row is name + stage + actions and the name is
* readable. Column order: 1 name · 2 client · 3 stage · 4 progress ·
* 5 modified · 6 value · 7 actions. Hiding BOTH matching | and |
* keeps the columns aligned. */
html[data-ui-mode="mobile"] #cab-dash .jobs-table { table-layout: auto; }
html[data-ui-mode="mobile"] #cab-dash .jobs-table thead th:nth-child(2),
html[data-ui-mode="mobile"] #cab-dash .jobs-table tbody td:nth-child(2),
html[data-ui-mode="mobile"] #cab-dash .jobs-table thead th:nth-child(4),
html[data-ui-mode="mobile"] #cab-dash .jobs-table tbody td:nth-child(4),
html[data-ui-mode="mobile"] #cab-dash .jobs-table thead th:nth-child(5),
html[data-ui-mode="mobile"] #cab-dash .jobs-table tbody td:nth-child(5),
html[data-ui-mode="mobile"] #cab-dash .jobs-table thead th:nth-child(6),
html[data-ui-mode="mobile"] #cab-dash .jobs-table tbody td:nth-child(6),
html[data-ui-mode="mobile"] #cab-dash .jobs-table thead th:nth-child(7),
html[data-ui-mode="mobile"] #cab-dash .jobs-table tbody td:nth-child(7) {
display: none;
}
html[data-ui-mode="mobile"] #cab-dash .jobs-table .col-name {
max-width: 52vw; /* leave room for the Stage column so it isn't clipped */
}
html[data-ui-mode="mobile"] #cab-dash .jobs-table .col-name .nm {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
/* 8b. DOOR table (#d-orders) — same treatment, keep Order(name) + Status.
* The Order cell already carries client / PO / pieces / style / date on
* sub-lines, so the hidden columns lose nothing. The body row OMITS the
* bulk-checkbox cell when not in bulk mode (door-studio.js:12438) while
* the header always has it (hidden) — so hide BODY cells by CLASS (robust
* to that offset) and HEADER cells by position. Header cells (bulk th is
* always nth-child 1): 1 bulk · 2 Order · 3 Style · 4 Pieces · 5 Status ·
* 6 Last Edited · 7 Actions. */
html[data-ui-mode="mobile"] #d-orders .jobs-table { table-layout: auto; }
html[data-ui-mode="mobile"] #d-orders .jobs-table thead th:nth-child(3),
html[data-ui-mode="mobile"] #d-orders .jobs-table thead th:nth-child(4),
html[data-ui-mode="mobile"] #d-orders .jobs-table thead th:nth-child(6),
html[data-ui-mode="mobile"] #d-orders .jobs-table thead th:nth-child(7),
html[data-ui-mode="mobile"] #d-orders .jobs-table tbody td.col-client,
html[data-ui-mode="mobile"] #d-orders .jobs-table tbody td.col-value,
html[data-ui-mode="mobile"] #d-orders .jobs-table tbody td.col-when,
html[data-ui-mode="mobile"] #d-orders .jobs-table tbody td.col-actions {
display: none;
}
html[data-ui-mode="mobile"] #d-orders .jobs-table .col-name .nm {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
|