on mobile — keep it scrollable horizontally,
hint with a fade on the right edge so users know to swipe. */
.gi-table, .recent-runs-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
position: relative;
border-radius: 8px;
}
.gi-table thead th, .recent-runs-table thead th { font-size: 11px; padding: 8px 10px !important; }
.gi-table tbody td, .recent-runs-table tbody td { font-size: 12px; padding: 8px 10px !important; }
/* Forms: every input, select, textarea full width. */
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], input[type="search"],
select, textarea {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
font-size: 16px !important; /* prevent iOS auto-zoom-on-focus */
}
label { display: block; margin-bottom: 10px; }
/* md-row from project settings: stack columns on mobile (was 2-col grid). */
.md-row { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.md-field, .md-field.md-grow, .md-field.md-shrink { width: 100% !important; max-width: 100% !important; }
/* Buttons: one per row, full width. */
.button, button[type="submit"] { width: 100%; box-sizing: border-box; }
.actions { display: flex; flex-direction: column; gap: 6px; }
.actions > .button.ghost.small,
.actions > .button.small { width: auto; flex: 0 1 auto; }
/* Inline-form (delete in table) should stay inline-flex among row-actions */
.inline-form { display: inline-flex; width: 100%; }
.inline-form .button { width: 100%; }
/* Tools row (project bottom): wrap, stack, with bigger tap targets. */
section[style*="font-size:12px"] a,
section[style*="font-size:12px"] form { display: block !important; margin: 0 0 8px 0 !important; padding: 8px 10px; background: #f8fafc; border-radius: 6px; }
/* User dropdown panel: full-width below header instead of floating right */
.gi-user-menu-panel { right: 4px !important; left: 4px !important; min-width: 0 !important; width: auto !important; }
/* Filter chips: scroll horizontally if too many */
.filter-chips-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
.filter-chips-row > * { flex-shrink: 0; }
/* Settings two-column layout → stack */
.settings-layout { grid-template-columns: 1fr !important; gap: 14px !important; }
.settings-nav { position: relative !important; }
.settings-nav a { padding: 10px 14px !important; }
/* Recent runs failed row — stop the bright background bleed past edge */
.recent-row-failed { background: rgba(254, 226, 226, .35) !important; }
/* Dashboard top-actions: equal width buttons in a 2-column grid */
.page-head .actions {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.page-head .actions > * { width: 100% !important; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}
/* Extra-narrow phones (≤ 380px): drop to 1-col actions */
@media (max-width: 380px) {
.page-head .actions { grid-template-columns: 1fr !important; }
}
/* ============================================================
Mobile fix #2 — second pass after auditing project.php history.
============================================================ */
@media (max-width: 720px) {
/* Universal safety net: anything inside .gi-wrap can't push past viewport */
.gi-wrap > *, .panel > *, .card > * { max-width: 100% !important; min-width: 0 !important; }
/* Activity history items (project.php bottom) */
.history-item { width: auto !important; max-width: 100% !important; padding: 12px !important; }
.history-main, .history-title, .history-actions { width: 100% !important; max-width: 100% !important; }
.history-title { flex-wrap: wrap; }
.history-output {
max-width: 100% !important;
overflow-x: auto;
white-space: pre-wrap !important;
word-break: break-word !important;
font-size: 11px !important;
}
.history-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.history-actions > * { flex: 1 1 auto; }
/* All / blocks across the app — break long lines instead of overflowing */
pre, code, .perma, .badge-box, .sig, .bot-snippet, textarea[readonly] {
max-width: 100% !important;
overflow-x: auto;
word-break: break-word;
white-space: pre-wrap !important;
font-size: 11px !important;
}
textarea { font-size: 13px !important; word-break: break-word; }
/* Settings layout — make the tabs horizontal scroll instead of forcing column */
.settings-tabs { display: flex !important; flex-direction: row !important; overflow-x: auto; white-space: nowrap; gap: 4px; padding-bottom: 4px; }
.settings-tab { flex: 0 0 auto; padding: 8px 12px !important; font-size: 12px !important; }
.settings-tab .settings-tab-icon { display: none; }
/* NOC wall cards — stack 1 per row */
.noc-grid { grid-template-columns: 1fr !important; }
.noc-totals { grid-template-columns: repeat(2, 1fr); gap: 8px !important; }
/* Audit/checkup/loadasbot public pages — already have own CSS but enforce single col */
.so-grid, .bot-grid, .res-grid { grid-template-columns: 1fr !important; }
.field-grid { grid-template-columns: 1fr !important; }
.meta { grid-template-columns: 1fr 1fr !important; }
}
/* ============================================================
Pretty pager — used by dashboard recent-runs + project activity.
Vždy vycentrovaný, mobile-first: na malých displayech jen šipky,
info "Page X / Y" zůstává čitelná uprostřed.
============================================================ */
.pager {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
margin: 18px auto 4px;
padding: 4px;
font-size: 13px;
}
.pager-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 34px;
padding: 0 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
color: #4f46e5;
text-decoration: none;
font-weight: 600;
font-size: 13px;
transition: background .12s, border-color .12s, color .12s, transform .08s;
white-space: nowrap;
}
.pager-btn:hover { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.pager-btn:active { transform: scale(.97); }
.pager-btn[aria-disabled="true"] {
opacity: .35;
pointer-events: none;
background: #f8fafc;
}
.pager-edge { padding: 0 10px; font-size: 16px; }
.pager-info {
padding: 0 14px;
height: 34px;
display: inline-flex;
align-items: center;
background: #eef2ff;
border-radius: 8px;
color: #1e293b;
font-weight: 500;
white-space: nowrap;
}
.pager-info strong { color: #4f46e5; margin: 0 2px; font-weight: 700; }
.pager-meta { color: #94a3b8; font-weight: 400; margin-left: 4px; }
/* Mobile: hide "Prev" / "Next" labels, keep only arrows + page indicator. */
@media (max-width: 720px) {
.pager { gap: 4px; }
.pager-btn { min-width: 40px; padding: 0 8px; font-size: 14px; width: auto !important; }
.pager-btn[title="Previous"] { font-size: 0; }
.pager-btn[title="Previous"]::before { content: '‹'; font-size: 18px; }
.pager-btn[title="Next"] { font-size: 0; }
.pager-btn[title="Next"]::before { content: '›'; font-size: 18px; }
.pager-info { padding: 0 10px; font-size: 12px; }
.pager-meta { display: none; } /* "· N total" se na úzkém displeji nevejde */
}
@media (max-width: 380px) {
.pager-edge { display: none; } /* první/poslední přebytečné na 360px screenech */
}