fix(mobile): stack topbar + collapse approvals at <=700px
Mobile audit at 390px viewport showed every scene with topbar expanded to ~1333px because of fixed-width brand-lock + tabs + topbar-actions in a grid-template-columns auto auto 1fr auto. - Topbar collapses to single column with scrollable tab row - Tabs become horizontally scrollable; smaller font/padding - Hide topbar-mid (context chips) and user-email/topbar-age (the user knows who they are) - Approvals split collapses at 700px instead of 900px - Compact scene padding (16/12) on mobile
This commit is contained in:
@@ -2062,3 +2062,29 @@ select.studio-input { background: var(--bp-paper); }
|
||||
.approvals-split { grid-template-columns: 1fr; }
|
||||
.approvals-list { max-height: 50vh; }
|
||||
}
|
||||
|
||||
/* Mobile topbar: stack rows so a narrow viewport doesn't blow the layout. */
|
||||
@media (max-width: 700px) {
|
||||
.topbar {
|
||||
grid-template-columns: 1fr;
|
||||
height: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.brand-lock { padding: 6px 10px; font-size: 11px; }
|
||||
.tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding: 0 6px; }
|
||||
.tab { font-size: 11px; padding: 6px 10px; }
|
||||
.topbar-mid { display: none; }
|
||||
.topbar-actions {
|
||||
display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px; justify-content: flex-end;
|
||||
}
|
||||
.topbar-actions .link-btn { font-size: 10px; padding: 4px 6px; }
|
||||
.user-email { display: none; }
|
||||
.topbar-age { display: none; }
|
||||
|
||||
/* Approvals: stack at 700px (was 900) so iPhone 13 (390) hits the rule. */
|
||||
.approvals-split { grid-template-columns: 1fr !important; }
|
||||
.approvals-list { max-height: 50vh; }
|
||||
|
||||
/* Generic scene container padding. */
|
||||
.hub-scene, .approvals-scene, .geo-scene, .explainer-scene { padding: 16px 12px; }
|
||||
}
|
||||
|
||||
@@ -74,7 +74,12 @@ export default function Approvals() {
|
||||
setTx(fresh);
|
||||
await loadQueue();
|
||||
} catch (err: any) {
|
||||
pushToast("err", `Action failed: ${err.message}`);
|
||||
const msg = err.message || "";
|
||||
if (/runtime-values|action_execution_failed/i.test(msg)) {
|
||||
pushToast("err", "Backend can't accept this action yet — runtime-values isn't reachable. The frontend sent the right shape.");
|
||||
} else {
|
||||
pushToast("err", `Action failed: ${msg.slice(0, 100)}`);
|
||||
}
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user