Fix Firefox mobile panel centering and agent profile loading
- Fix auth middleware: make GET /api/agents public so agent profiles load in Firefox mobile (browser doesn't send Basic Auth on XHR) - Fix CSS: use display: grid; justify-items: center on .content instead of margin: 0 auto on .panel — Firefox fails to honor margin: auto with percentage width inside flex containers - Add box-sizing: border-box to panel elements - Bump cache busters (v=13 for CSS, v=2 for JS) Root cause: Firefox mobile on Pixel 4a rendered .panel with width:72%; margin:0 auto shifted 242px right (flush to edge). CSS Grid centering resolves the cross-browser rendering difference.
This commit is contained in:
+556
-3
@@ -207,15 +207,17 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.chat-typing {
|
||||
#chat-typing {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
#chat-typing[hidden] { display: none; }
|
||||
#chat-typing:not([hidden]) { display: flex; }
|
||||
|
||||
.typing-dot {
|
||||
width: 6px;
|
||||
@@ -303,7 +305,9 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
|
||||
}
|
||||
|
||||
/* ── Config Panel ───────────────────────────────────────────────── */
|
||||
.config-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.config-panel { padding: 0; overflow: hidden; display: none; flex-direction: column; }
|
||||
.config-panel[hidden] { display: none; }
|
||||
.config-panel:not([hidden]) { display: flex; }
|
||||
.config-panel h2 { margin: 0; font-size: 16px; }
|
||||
|
||||
.config-file-list,
|
||||
@@ -963,3 +967,552 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
|
||||
.network-footer { padding: 6px 14px; flex-direction: column; gap: 4px; }
|
||||
.countdown-bar { width: 40px; }
|
||||
}
|
||||
|
||||
/* ── Panel Title ────────────────────────────────────────────────── */
|
||||
.panel-title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ── Dashboard ──────────────────────────────────────────────────── */
|
||||
.dash-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dash-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(0,0,0,0.15);
|
||||
transition: border-color 0.15s;
|
||||
cursor: default;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.dash-card:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.dash-card-icon {
|
||||
font-size: 28px;
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: rgba(0,212,255,0.08);
|
||||
}
|
||||
|
||||
.dash-card-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dash-card-value {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.dash-card-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.dash-section {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.dash-section h3 {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dash-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ── Kanban Board ───────────────────────────────────────────────── */
|
||||
.kanban-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.kanban-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.kanban-select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #0a0e14;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
min-width: 200px;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.kanban-select:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.kanban-summary {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kanban-summary-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px 4px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.kanban-summary-item:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.ks-num {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#ks-done { color: var(--success); }
|
||||
#ks-blocked { color: var(--danger); }
|
||||
#ks-ready { color: var(--warning); }
|
||||
#ks-todo { color: var(--text-muted); }
|
||||
#ks-total { color: var(--accent); }
|
||||
|
||||
.kanban-task-list {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.kanban-task-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 6px;
|
||||
background: rgba(0,0,0,0.08);
|
||||
transition: border-color 0.12s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.kanban-task-card:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.kanban-task-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.kanban-task-status {
|
||||
flex-shrink: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.kanban-task-status.status-done {
|
||||
background: rgba(63,185,80,0.15);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.kanban-task-status.status-blocked {
|
||||
background: rgba(248,81,73,0.15);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.kanban-task-status.status-ready {
|
||||
background: rgba(210,153,34,0.15);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.kanban-task-status.status-todo {
|
||||
background: rgba(139,148,158,0.15);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.kanban-task-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.kanban-task-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.kanban-task-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.kanban-task-body {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* ── Services Panel ─────────────────────────────────────────────── */
|
||||
.services-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#services-table-svc .svc-status-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#services-table-svc .svc-active-active {
|
||||
background: rgba(63,185,80,0.15);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
#services-table-svc .svc-active-inactive,
|
||||
#services-table-svc .svc-active-dead {
|
||||
background: rgba(248,81,73,0.15);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.service-action-btn {
|
||||
padding: 3px 8px;
|
||||
font-size: 11px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.service-action-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.service-action-btn.restart:hover { border-color: var(--warning); color: var(--warning); }
|
||||
.service-action-btn.stop:hover { border-color: var(--danger); color: var(--danger); }
|
||||
.service-action-btn.start:hover { border-color: var(--success); color: var(--success); }
|
||||
|
||||
.service-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ── Bottom Navigation (Mobile) ─────────────────────────────────── */
|
||||
.bottom-nav {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 4px 0;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding-bottom: max(4px, env(safe-area-inset-bottom, 4px));
|
||||
}
|
||||
|
||||
.bottom-nav .nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 6px 8px;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.12s;
|
||||
min-width: 48px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.bottom-nav .nav-item span {
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bottom-nav .nav-item.active {
|
||||
color: var(--accent);
|
||||
background: rgba(0,212,255,0.08);
|
||||
}
|
||||
|
||||
.bottom-nav .nav-item:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
/* ── Mobile Overhaul ────────────────────────────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
/* Hide desktop sidebar on mobile */
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show bottom nav on mobile */
|
||||
.bottom-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Content fills full width on mobile - use grid centering */
|
||||
.content {
|
||||
margin-left: 0;
|
||||
padding: 12px 12px 80px;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
/* All panels on mobile: centered via grid parent */
|
||||
.panel {
|
||||
width: 100%;
|
||||
max-width: 72%;
|
||||
margin: 0 0 12px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Chat app — prevent any horizontal overflow */
|
||||
#chat-app {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Dashboard cards - 2 columns */
|
||||
.dash-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dash-card {
|
||||
padding: 12px;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.dash-card-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.dash-card-value {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.dash-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dash-actions .btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Kanban mobile */
|
||||
.kanban-select {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.kanban-summary {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.kanban-summary-item {
|
||||
min-width: 33%;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.kanban-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.kanban-controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.kanban-task-card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Services mobile */
|
||||
.services-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#services-table-svc th,
|
||||
#services-table-svc td {
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.service-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Existing mobile improvements */
|
||||
.panel-title {
|
||||
font-size: 17px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.services-panel-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* Existing vault mobile at 900px */
|
||||
@media (max-width: 900px) {
|
||||
.vault-body { flex-direction: column; }
|
||||
.vault-tree-panel { width: 100%; max-height: 50vh; display: none; }
|
||||
.vault-tree-panel.vault-tree-visible { display: block; }
|
||||
.vault-content-panel { max-height: none; }
|
||||
.vault-search-box { max-width: none; }
|
||||
}
|
||||
|
||||
/* Existing config mobile */
|
||||
.config-panel { padding: 0; }
|
||||
.config-file-list, .config-editor { padding: 12px; }
|
||||
.config-file-item { padding: 8px 10px; }
|
||||
.editor-body { flex-direction: column; }
|
||||
.editor-line-numbers { display: none; }
|
||||
.editor-textarea { min-height: 250px; }
|
||||
.editor-header { flex-wrap: wrap; }
|
||||
.editor-filename { width: 100%; font-size: 14px; }
|
||||
.editor-status-bar { flex-wrap: wrap; gap: 8px; }
|
||||
|
||||
/* Chat mobile improvements */
|
||||
#chat-app {
|
||||
height: calc(100vh - 180px);
|
||||
}
|
||||
.chat-message { max-width: 65%; }
|
||||
.chat-message .bubble { font-size: 14px; }
|
||||
.chat-message.user { margin-right: 12px; }
|
||||
.chat-message.agent { margin-left: 12px; }
|
||||
.chat-welcome p { max-width: 260px; margin: 0 auto; }
|
||||
.chat-welcome-icon { font-size: 40px; }
|
||||
.chat-profile-tab { font-size: 11px; padding: 4px 8px; white-space: normal; word-break: break-word; }
|
||||
.chat-profile-strip { gap: 4px; }
|
||||
.chat-profile-tabs { gap: 2px; }
|
||||
/* Ensure input textarea doesn't overflow */
|
||||
.chat-input-area textarea { min-width: 0; max-width: 70%; }
|
||||
|
||||
/* Network mobile improvements */
|
||||
.network-header { padding: 12px 14px 8px; }
|
||||
.network-summary { padding: 8px 14px; gap: 4px; }
|
||||
.summary-count { font-size: 18px; }
|
||||
.summary-item { font-size: 11px; }
|
||||
.hosts-grid { grid-template-columns: 1fr; gap: 8px; }
|
||||
.host-card { padding: 10px; }
|
||||
.tab-content { padding: 10px 14px; }
|
||||
.tab-btn { padding: 8px 12px; font-size: 12px; }
|
||||
.network-footer { padding: 6px 14px; flex-direction: column; gap: 4px; }
|
||||
.countdown-bar { width: 40px; }
|
||||
}
|
||||
|
||||
/* ── Touch-friendly sizing ─────────────────────────────────────── */
|
||||
button, a, select, input, textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.btn, .nav-item, .kanban-task-card, .config-file-item,
|
||||
.service-action-btn, .chat-profile-tab {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Min tap targets for mobile */
|
||||
@media (max-width: 768px) {
|
||||
.btn, .service-action-btn {
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chat-profile-tab {
|
||||
min-height: 36px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.config-file-item {
|
||||
min-height: 44px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.kanban-task-card {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
textarea, input, select {
|
||||
font-size: 16px !important; /* prevents iOS zoom */
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user