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:
+284
-410
File diff suppressed because it is too large
Load Diff
+143
-35
@@ -2,23 +2,99 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="theme-color" content="#0d1117">
|
||||
<title>Hermes Command Center</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<link rel="stylesheet" href="/static/style.css?v=13">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<nav class="sidebar">
|
||||
<!-- Desktop Sidebar -->
|
||||
<nav class="sidebar" id="sidebar">
|
||||
<div class="logo">🎛️ Command Center</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#agents" class="active">💬 Agents</a></li>
|
||||
<li><a href="#dashboard" class="active">📊 Dashboard</a></li>
|
||||
<li><a href="#agents">💬 Chat</a></li>
|
||||
<li><a href="#config">⚙️ Config</a></li>
|
||||
<li><a href="#kanban">📋 Kanban</a></li>
|
||||
<li><a href="#vault">📚 Vault</a></li>
|
||||
<li><a href="#services">🔧 Services</a></li>
|
||||
<li><a href="#network">🌐 Network</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main class="content">
|
||||
<section id="agents" class="panel">
|
||||
|
||||
<!-- Mobile Bottom Nav -->
|
||||
<nav class="bottom-nav" id="bottom-nav">
|
||||
<a href="#dashboard" class="nav-item active" data-tab="dashboard">📊<span>Home</span></a>
|
||||
<a href="#agents" class="nav-item" data-tab="agents">💬<span>Chat</span></a>
|
||||
<a href="#config" class="nav-item" data-tab="config">⚙️<span>Config</span></a>
|
||||
<a href="#kanban" class="nav-item" data-tab="kanban">📋<span>Tasks</span></a>
|
||||
<a href="#vault" class="nav-item" data-tab="vault">📚<span>Vault</span></a>
|
||||
<a href="#network" class="nav-item" data-tab="network">🌐<span>Net</span></a>
|
||||
</nav>
|
||||
|
||||
<main class="content" id="content">
|
||||
|
||||
<!-- ════════════ Dashboard Panel ════════════ -->
|
||||
<section id="dashboard" class="panel">
|
||||
<h2 class="panel-title">📊 Dashboard</h2>
|
||||
<div class="dash-grid" id="dash-grid">
|
||||
<div class="dash-card" id="dash-agents">
|
||||
<div class="dash-card-icon">💬</div>
|
||||
<div class="dash-card-body">
|
||||
<div class="dash-card-value" id="dash-agents-val">—</div>
|
||||
<div class="dash-card-label">Agents Online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dash-card" id="dash-hosts">
|
||||
<div class="dash-card-icon">🖥️</div>
|
||||
<div class="dash-card-body">
|
||||
<div class="dash-card-value" id="dash-hosts-val">—</div>
|
||||
<div class="dash-card-label">Hosts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dash-card" id="dash-files">
|
||||
<div class="dash-card-icon">⚙️</div>
|
||||
<div class="dash-card-body">
|
||||
<div class="dash-card-value" id="dash-files-val">—</div>
|
||||
<div class="dash-card-label">Config Files</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dash-card" id="dash-msgs">
|
||||
<div class="dash-card-icon">💭</div>
|
||||
<div class="dash-card-body">
|
||||
<div class="dash-card-value" id="dash-msgs-val">—</div>
|
||||
<div class="dash-card-label">Chat Messages</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dash-card" id="dash-tasks">
|
||||
<div class="dash-card-icon">✅</div>
|
||||
<div class="dash-card-body">
|
||||
<div class="dash-card-value" id="dash-tasks-val">—</div>
|
||||
<div class="dash-card-label">Tasks Done</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dash-card" id="dash-boards">
|
||||
<div class="dash-card-icon">📋</div>
|
||||
<div class="dash-card-body">
|
||||
<div class="dash-card-value" id="dash-boards-val">—</div>
|
||||
<div class="dash-card-label">Kanban Boards</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dash-section">
|
||||
<h3>Quick Actions</h3>
|
||||
<div class="dash-actions">
|
||||
<button class="btn btn-sm" onclick="window.location.hash='#agents'">💬 Open Chat</button>
|
||||
<button class="btn btn-sm" onclick="window.location.hash='#kanban'">📋 View Tasks</button>
|
||||
<button class="btn btn-sm" onclick="window.location.hash='#network'">🌐 Check Network</button>
|
||||
<button class="btn btn-sm" onclick="refreshDashboard()">🔄 Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════ Agent Chat Panel ════════════ -->
|
||||
<section id="agents" class="panel" hidden>
|
||||
<div id="chat-app">
|
||||
<div class="chat-header">
|
||||
<div class="chat-profile-strip">
|
||||
@@ -45,10 +121,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════ Config Editor Panel ════════════ -->
|
||||
<section id="config" class="panel config-panel" hidden>
|
||||
<div class="config-file-list" id="config-file-list">
|
||||
<div class="config-header">
|
||||
<h2>Config Editor</h2>
|
||||
<h2 class="panel-title">⚙️ Config Editor</h2>
|
||||
<span class="config-count" id="config-count">0 files</span>
|
||||
</div>
|
||||
<div class="config-files-container" id="config-files-container">
|
||||
@@ -60,7 +138,7 @@
|
||||
<button id="config-back-btn" class="btn btn-sm" title="Back to file list">← Back</button>
|
||||
<span class="editor-filename" id="editor-filename"></span>
|
||||
<div class="editor-actions">
|
||||
<button id="config-save-btn" class="btn btn-primary btn-sm" disabled>Saved ✓</button>
|
||||
<button id="config-save-btn" class="btn btn-primary btn-sm" disabled>Saved ✓</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-body">
|
||||
@@ -77,6 +155,30 @@
|
||||
</div>
|
||||
<div id="config-toast" class="config-toast" hidden></div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════ Kanban Panel ════════════ -->
|
||||
<section id="kanban" class="panel" hidden>
|
||||
<div class="kanban-header">
|
||||
<h2 class="panel-title">📋 Kanban Boards</h2>
|
||||
<div class="kanban-controls">
|
||||
<select id="kanban-board-select" class="kanban-select" onchange="loadKanbanBoard()">
|
||||
<option value="">Select a board...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="kanban-summary" class="kanban-summary">
|
||||
<div class="kanban-summary-item"><span class="ks-num" id="ks-done">0</span> Done</div>
|
||||
<div class="kanban-summary-item"><span class="ks-num" id="ks-blocked">0</span> Blocked</div>
|
||||
<div class="kanban-summary-item"><span class="ks-num" id="ks-ready">0</span> Ready</div>
|
||||
<div class="kanban-summary-item"><span class="ks-num" id="ks-todo">0</span> Todo</div>
|
||||
<div class="kanban-summary-item"><span class="ks-num" id="ks-total">0</span> Total</div>
|
||||
</div>
|
||||
<div id="kanban-task-list" class="kanban-task-list">
|
||||
<p class="loading-text">Select a board to view tasks...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════ Vault Reader Panel ════════════ -->
|
||||
<section id="vault" class="panel" hidden>
|
||||
<div id="vault-app">
|
||||
<div class="vault-toolbar">
|
||||
@@ -97,9 +199,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════ Services Panel ════════════ -->
|
||||
<section id="services" class="panel" hidden>
|
||||
<div class="services-panel-header">
|
||||
<h2 class="panel-title">🔧 System Services</h2>
|
||||
<button class="btn btn-sm" onclick="loadServices()">🔄 Refresh</button>
|
||||
</div>
|
||||
<div class="services-table-wrap">
|
||||
<table class="services-table" id="services-table-svc">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Service</th>
|
||||
<th>Status</th>
|
||||
<th>Sub</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="services-tbody-svc">
|
||||
<tr><td colspan="4" class="loading-text">Loading services...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════ Network Dashboard Panel ════════════ -->
|
||||
<section id="network" class="panel network-panel" hidden>
|
||||
<div class="network-header">
|
||||
<h2>Network Status</h2>
|
||||
<h2>🌐 Network Status</h2>
|
||||
<div class="network-controls">
|
||||
<div class="countdown-bar" id="countdown-bar">
|
||||
<div class="countdown-fill" id="countdown-fill"></div>
|
||||
@@ -111,39 +238,28 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary Bar -->
|
||||
<div class="network-summary" id="network-summary">
|
||||
<div class="summary-item online"><span class="summary-count" id="hosts-online">0</span> Online</div>
|
||||
<div class="summary-item degraded"><span class="summary-count" id="hosts-degraded">0</span> Degraded</div>
|
||||
<div class="summary-item offline"><span class="summary-count" id="hosts-offline">0</span> Offline</div>
|
||||
<div class="summary-item total"><span class="summary-count" id="hosts-total">0</span> Total</div>
|
||||
</div>
|
||||
|
||||
<div class="network-tabs">
|
||||
<button class="tab-btn active" data-tab="hosts">Hosts</button>
|
||||
<button class="tab-btn" data-tab="services">Services</button>
|
||||
<button class="tab-btn" data-tab="local">Local Services</button>
|
||||
<button class="tab-btn" data-tab="local">Local</button>
|
||||
</div>
|
||||
|
||||
<!-- Hosts Tab -->
|
||||
<div class="tab-content active" id="tab-hosts">
|
||||
<div class="hosts-grid" id="hosts-grid">
|
||||
<div class="loading-text">Loading hosts...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services Tab -->
|
||||
<div class="tab-content" id="tab-services">
|
||||
<div class="services-table-wrap">
|
||||
<table class="services-table" id="services-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Service</th>
|
||||
<th>Category</th>
|
||||
<th>URL / Port</th>
|
||||
<th>Status</th>
|
||||
<th>Latency</th>
|
||||
<th>Service</th><th>Category</th><th>URL / Port</th><th>Status</th><th>Latency</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="services-tbody">
|
||||
@@ -152,33 +268,25 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Local Services Tab -->
|
||||
<div class="tab-content" id="tab-local">
|
||||
<div class="services-table-wrap">
|
||||
<table class="services-table" id="local-services-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Address</th>
|
||||
<th>Port</th>
|
||||
<th>Process</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<thead><tr><th>Address</th><th>Port</th><th>Process</th></tr></thead>
|
||||
<tbody id="local-services-tbody">
|
||||
<tr><td colspan="3" class="loading-text">Loading local services...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="network-footer">
|
||||
<span class="last-updated" id="last-updated">Last updated: —</span>
|
||||
<span class="cache-info" id="cache-info"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
<script src="/static/app.js"></script>
|
||||
<script src="/static/vault.js"></script>
|
||||
<script src="/static/app.js?v=2"></script>
|
||||
<script src="/static/vault.js?v=2"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+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