sits directly in .
That parent must scroll horizontally on mobile so the URL column doesn't
clip (image 14). Same belt-and-braces protection for any other page that
places an sp-table directly inside a sec-card. --- */
@media (max-width: 768px) {
.sec-card:has(> table),
.sec-card:has(> .sp-table),
.sec-card:has(> .dt) {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
}
/* --- Issue Rewards modal (Wallet Management): the row uses a 4-col grid
`32px 1fr auto auto` where the two trailing `auto` cells hold the
"1,842 sent" / "1,012 ok" stats. On a 390px viewport these spill past
the modal edge (image 10). Reflow to 2-col, push stats below. --- */
@media (max-width: 768px) {
.wm-camp-list .wm-camp-row {
grid-template-columns: 32px 1fr !important;
row-gap: 6px !important;
}
/* All children after the second column drop onto a new row spanning the
content column. We can't use nth-child reliably without knowing exact
children counts, but `:nth-child(n+3)` covers 3rd, 4th, 5th… */
.wm-camp-list .wm-camp-row > :nth-child(n+3) {
grid-column: 2 !important;
text-align: left !important;
font-size: 11.5px;
}
/* Modal footer with Cancel + Issue Rewards buttons — let it stack */
.bl-mc-foot { flex-wrap: wrap; gap: 10px; }
.bl-mc-foot-acts { width: 100%; justify-content: flex-end; }
}
/* --- Use Case Changes form: stack inline 2-col grids on mobile --- */
@media (max-width: 768px) {
/* Override inline grid-template-columns: 1fr 1fr */
.uc-page [style*="grid-template-columns:1fr 1fr"],
.uc-page [style*="grid-template-columns: 1fr 1fr"],
.main [style*="grid-template-columns:1fr 1fr"]:not(.kpi-row):not(.field-row),
.main [style*="grid-template-columns: 1fr 1fr"]:not(.kpi-row):not(.field-row),
.main [style*="grid-template-columns:1fr 1fr 1fr"],
.main [style*="grid-template-columns: 1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
}
/* --- Custom Roles: remove blank space below 1-row table --- */
@media (max-width: 768px) {
.dt-wrap { min-height: 0 !important; }
.dt-scroll { min-height: 0 !important; }
.dt-empty { padding: 24px 12px !important; }
}
/* --- Quick Replies: ensure filter button stays visible --- */
@media (max-width: 768px) {
.qr-toolbar, .qr-actions, .qr-head {
flex-wrap: wrap !important;
gap: 8px !important;
}
.qr-toolbar .btn, .qr-actions .btn { flex-shrink: 0; }
}
/* --- Opt-In Management: Audit / Upload / Add Number buttons --- */
@media (max-width: 768px) {
/* sp-actions is already stacked via earlier rule; ensure buttons full-width and centered text */
.sp-actions .btn {
justify-content: center;
text-align: center;
}
}
/* --- MM Lite: filter button visibility & toolbar wrap --- */
@media (max-width: 768px) {
.mm-toolbar, .mml-toolbar, .mml-head, .filter-row {
flex-wrap: wrap !important;
gap: 8px !important;
}
.filter-panel {
flex-wrap: wrap !important;
gap: 10px !important;
}
.filter-panel .flt-group {
width: 100% !important;
min-width: 0 !important;
}
}
/* --- Media Library: info text overflow fix --- */
@media (max-width: 768px) {
.ml-banner, .ml-info, .bl-banner.info,
.ml-page .info-card, .ml-card .help-text {
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
}
.ml-banner > div, .ml-info > div, .bl-banner.info > div {
min-width: 0;
flex: 1 1 auto;
}
}
/* --- Generate Invoice: prevent email field/content overlap --- */
@media (max-width: 768px) {
.invoice-page .field-row,
.gen-invoice [style*="grid-template-columns"],
.gen-invoice-meta {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.invoice-meta-row {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.invoice-page input[type="email"],
.gen-invoice input[type="email"] {
width: 100% !important;
min-width: 0;
}
}
/* --- Wallet / Wallet Management / Credit Management: tables --- */
@media (max-width: 880px) {
.wallet-page .dt,
.wallet-page table,
.credit-mgmt .dt,
.credit-mgmt table,
.credits-page .dt,
.credits-page table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
max-width: 100%;
}
}
/* --- API Keys / Webhook Endpoints: vertical overflow fix on long content --- */
@media (max-width: 768px) {
.api-keys-page .key-row,
.webhooks-page .endpoint-row,
.api-page .row {
flex-wrap: wrap !important;
gap: 8px !important;
}
.api-keys-page .key-value,
.webhooks-page .endpoint-url {
word-break: break-all;
overflow-wrap: anywhere;
max-width: 100%;
}
/* Ensure these page tables also scroll horizontally */
.api-keys-page table,
.webhooks-page table,
.api-page table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
max-width: 100%;
}
}
/* =========================================================
Print: not in scope but harmless
========================================================= */
@media print {
.sidebar, .topbar, .pane-resize-handle, .sidebar-toggle { display: none !important; }
.app { grid-template-columns: 1fr !important; }
}