ScuttleBot

ui: add mobile responsive CSS for web UI Add @media (max-width: 600px) breakpoint with fixes for: - Scrollable nav tabs with hidden scrollbar - Single-column stat grids and chart grids - Compact header with hidden brand subtitle - Stacked settings form labels - Full-width drawers and modals - Overlay chat sidebar and nicklist panels - Reduced padding throughout

lmata 2026-04-03 19:04 trunk
Commit c6d6570f58c48fb9e461f5fe3e854aac87666cad61c8546996a90736a1f77f79
Parent c45e13f7214d4cd…
1 file changed +57
~ internal/api/ui/index.html
M internal/api/ui/index.html
+57
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -192,10 +192,67 @@
192192
 .chart-card { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:14px 16px; }
193193
 .chart-label { font-size:11px; color:#8b949e; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
194194
 .chart-label .val { margin-left:auto; font-size:13px; color:#e6edf3; font-weight:600; letter-spacing:0; text-transform:none; }
195195
 canvas { display:block; width:100% !important; }
196196
 .bridge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
197
+
198
+/* mobile */
199
+@media (max-width: 600px) {
200
+ /* header: shorter, compact brand, scrollable nav */
201
+ header { padding:0 8px; height:44px; }
202
+ .brand { padding-right:8px; margin-right:0; border-right:none; }
203
+ .brand span { display:none; }
204
+ nav { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
205
+ nav::-webkit-scrollbar { display:none; }
206
+ .nav-tab { padding:0 10px; font-size:12px; }
207
+ .header-right { display:none; }
208
+
209
+ /* content: reduce padding, stack grids */
210
+ .pane-inner { padding:12px; gap:12px; }
211
+ .stat-grid { grid-template-columns:1fr !important; }
212
+ .card-body { padding:12px !important; }
213
+
214
+ /* charts and bridge grids: single column */
215
+ .charts-grid { grid-template-columns:1fr !important; }
216
+ .bridge-grid { grid-template-columns:1fr !important; }
217
+
218
+ /* forms: stack 2-column rows */
219
+ .form-row { grid-template-columns:1fr !important; }
220
+
221
+ /* inline 2-column grids inside drawers/forms */
222
+ [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
223
+
224
+ /* chat: collapse sidebar and nicklist by default, overlay when open */
225
+ .chat-sidebar { width:0; min-width:0; border-right:none; }
226
+ .chat-sidebar:not(.collapsed) { position:fixed; top:44px; left:0; bottom:0; width:200px; z-index:50; border-right:1px solid #30363d; }
227
+ .chat-nicklist { width:0; min-width:0; border-left:none; }
228
+ .chat-nicklist:not(.collapsed) { position:fixed; top:44px; right:0; bottom:0; width:160px; z-index:50; border-left:1px solid #30363d; }
229
+ .sidebar-resize { display:none; }
230
+
231
+ /* settings: stack label above input */
232
+ .setting-row { flex-direction:column !important; align-items:flex-start !important; gap:6px !important; }
233
+ .setting-label { min-width:unset !important; }
234
+
235
+ /* drawer: full-width on mobile */
236
+ .drawer { width:100vw; max-width:100vw; top:44px; }
237
+ .drawer-header { padding:12px 14px; }
238
+ .drawer-body { padding:14px; }
239
+
240
+ /* modal */
241
+ .modal { width:95vw; padding:16px; }
242
+
243
+ /* filter bar */
244
+ .filter-bar { flex-wrap:wrap; }
245
+ .filter-bar input { max-width:100% !important; flex:1; min-width:0; }
246
+
247
+ /* login */
248
+ .login-box { width:90vw; max-width:340px; }
249
+
250
+ /* message nicks: narrower */
251
+ .msg-nick { min-width:60px; }
252
+ .msg-time { min-width:32px; }
253
+}
197254
 </style>
198255
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
199256
 </head>
200257
 <body>
201258
202259
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -192,10 +192,67 @@
192 .chart-card { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:14px 16px; }
193 .chart-label { font-size:11px; color:#8b949e; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
194 .chart-label .val { margin-left:auto; font-size:13px; color:#e6edf3; font-weight:600; letter-spacing:0; text-transform:none; }
195 canvas { display:block; width:100% !important; }
196 .bridge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
197 </style>
198 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
199 </head>
200 <body>
201
202
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -192,10 +192,67 @@
192 .chart-card { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:14px 16px; }
193 .chart-label { font-size:11px; color:#8b949e; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
194 .chart-label .val { margin-left:auto; font-size:13px; color:#e6edf3; font-weight:600; letter-spacing:0; text-transform:none; }
195 canvas { display:block; width:100% !important; }
196 .bridge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
197
198 /* mobile */
199 @media (max-width: 600px) {
200 /* header: shorter, compact brand, scrollable nav */
201 header { padding:0 8px; height:44px; }
202 .brand { padding-right:8px; margin-right:0; border-right:none; }
203 .brand span { display:none; }
204 nav { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
205 nav::-webkit-scrollbar { display:none; }
206 .nav-tab { padding:0 10px; font-size:12px; }
207 .header-right { display:none; }
208
209 /* content: reduce padding, stack grids */
210 .pane-inner { padding:12px; gap:12px; }
211 .stat-grid { grid-template-columns:1fr !important; }
212 .card-body { padding:12px !important; }
213
214 /* charts and bridge grids: single column */
215 .charts-grid { grid-template-columns:1fr !important; }
216 .bridge-grid { grid-template-columns:1fr !important; }
217
218 /* forms: stack 2-column rows */
219 .form-row { grid-template-columns:1fr !important; }
220
221 /* inline 2-column grids inside drawers/forms */
222 [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
223
224 /* chat: collapse sidebar and nicklist by default, overlay when open */
225 .chat-sidebar { width:0; min-width:0; border-right:none; }
226 .chat-sidebar:not(.collapsed) { position:fixed; top:44px; left:0; bottom:0; width:200px; z-index:50; border-right:1px solid #30363d; }
227 .chat-nicklist { width:0; min-width:0; border-left:none; }
228 .chat-nicklist:not(.collapsed) { position:fixed; top:44px; right:0; bottom:0; width:160px; z-index:50; border-left:1px solid #30363d; }
229 .sidebar-resize { display:none; }
230
231 /* settings: stack label above input */
232 .setting-row { flex-direction:column !important; align-items:flex-start !important; gap:6px !important; }
233 .setting-label { min-width:unset !important; }
234
235 /* drawer: full-width on mobile */
236 .drawer { width:100vw; max-width:100vw; top:44px; }
237 .drawer-header { padding:12px 14px; }
238 .drawer-body { padding:14px; }
239
240 /* modal */
241 .modal { width:95vw; padding:16px; }
242
243 /* filter bar */
244 .filter-bar { flex-wrap:wrap; }
245 .filter-bar input { max-width:100% !important; flex:1; min-width:0; }
246
247 /* login */
248 .login-box { width:90vw; max-width:340px; }
249
250 /* message nicks: narrower */
251 .msg-nick { min-width:60px; }
252 .msg-time { min-width:32px; }
253 }
254 </style>
255 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
256 </head>
257 <body>
258
259

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button