ScuttleBot
ui: tighten chat layout — reduce padding, gaps, and line height Reduce whitespace in chat messages globally (padding 4px 8px, gap 0, line-height 1.4) and further on mobile (2px 4px, 12px font, truncated nicks). Maximizes screen real estate for message content.
Commit
f75c4a836ba4e2e5bf0ed297ecc0362f194628ee71749dfc7534e54972b9c1e6
Parent
933f7ce43858fc1…
1 file changed
+11
-7
+11
-7
| --- internal/api/ui/index.html | ||
| +++ internal/api/ui/index.html | ||
| @@ -139,14 +139,14 @@ | ||
| 139 | 139 | .chan-item.active { background:#1f6feb22; color:#58a6ff; border-left:2px solid #58a6ff; padding-left:12px; } |
| 140 | 140 | .chat-main { flex:1; display:flex; flex-direction:column; min-width:0; } |
| 141 | 141 | .chat-topbar { padding:9px 16px; border-bottom:1px solid #30363d; display:flex; align-items:center; gap:10px; flex-shrink:0; background:#161b22; font-size:13px; } |
| 142 | 142 | .chat-ch-name { font-weight:600; color:#58a6ff; } |
| 143 | 143 | .stream-badge { font-size:11px; color:#8b949e; margin-left:auto; } |
| 144 | -.chat-msgs { flex:1; overflow-y:auto; padding:10px 16px; display:flex; flex-direction:column; gap:1px; } | |
| 145 | -.msg-row { display:flex; gap:10px; font-size:13px; line-height:1.6; padding:1px 0; } | |
| 146 | -.msg-time { color:#8b949e; font-size:11px; flex-shrink:0; padding-top:3px; min-width:40px; } | |
| 147 | -.msg-nick { font-weight:600; flex-shrink:0; min-width:90px; text-align:right; } | |
| 144 | +.chat-msgs { flex:1; overflow-y:auto; padding:4px 8px; display:flex; flex-direction:column; gap:0; } | |
| 145 | +.msg-row { display:flex; gap:6px; font-size:13px; line-height:1.4; padding:1px 0; } | |
| 146 | +.msg-time { color:#8b949e; font-size:11px; flex-shrink:0; padding-top:2px; min-width:36px; } | |
| 147 | +.msg-nick { font-weight:600; flex-shrink:0; min-width:80px; text-align:right; } | |
| 148 | 148 | .msg-grouped .msg-nick { visibility:hidden; } |
| 149 | 149 | .msg-grouped .msg-time { color:transparent; } |
| 150 | 150 | .msg-grouped:hover .msg-time { color:#8b949e; transition:color .1s; } |
| 151 | 151 | .chat-nicklist { width:148px; min-width:0; flex-shrink:0; border-left:1px solid #30363d; display:flex; flex-direction:column; background:#161b22; overflow-y:auto; overflow-x:hidden; transition:width .15s; } |
| 152 | 152 | .chat-nicklist.collapsed { width:28px; overflow:hidden; } |
| @@ -246,13 +246,17 @@ | ||
| 246 | 246 | .filter-bar input { max-width:100% !important; flex:1; min-width:0; } |
| 247 | 247 | |
| 248 | 248 | /* login */ |
| 249 | 249 | .login-box { width:90vw; max-width:340px; } |
| 250 | 250 | |
| 251 | - /* message nicks: narrower */ | |
| 252 | - .msg-nick { min-width:60px; } | |
| 253 | - .msg-time { min-width:32px; } | |
| 251 | + /* chat: tighter on mobile */ | |
| 252 | + .chat-msgs { padding:2px 4px; } | |
| 253 | + .msg-row { gap:4px; font-size:12px; line-height:1.3; } | |
| 254 | + .msg-nick { min-width:0; max-width:70px; overflow:hidden; text-overflow:ellipsis; } | |
| 255 | + .msg-time { min-width:28px; font-size:10px; } | |
| 256 | + .chat-input { padding:6px 8px; } | |
| 257 | + .chat-topbar { padding:6px 10px; gap:6px; font-size:12px; } | |
| 254 | 258 | } |
| 255 | 259 | </style> |
| 256 | 260 | <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> |
| 257 | 261 | </head> |
| 258 | 262 | <body> |
| 259 | 263 |
| --- internal/api/ui/index.html | |
| +++ internal/api/ui/index.html | |
| @@ -139,14 +139,14 @@ | |
| 139 | .chan-item.active { background:#1f6feb22; color:#58a6ff; border-left:2px solid #58a6ff; padding-left:12px; } |
| 140 | .chat-main { flex:1; display:flex; flex-direction:column; min-width:0; } |
| 141 | .chat-topbar { padding:9px 16px; border-bottom:1px solid #30363d; display:flex; align-items:center; gap:10px; flex-shrink:0; background:#161b22; font-size:13px; } |
| 142 | .chat-ch-name { font-weight:600; color:#58a6ff; } |
| 143 | .stream-badge { font-size:11px; color:#8b949e; margin-left:auto; } |
| 144 | .chat-msgs { flex:1; overflow-y:auto; padding:10px 16px; display:flex; flex-direction:column; gap:1px; } |
| 145 | .msg-row { display:flex; gap:10px; font-size:13px; line-height:1.6; padding:1px 0; } |
| 146 | .msg-time { color:#8b949e; font-size:11px; flex-shrink:0; padding-top:3px; min-width:40px; } |
| 147 | .msg-nick { font-weight:600; flex-shrink:0; min-width:90px; text-align:right; } |
| 148 | .msg-grouped .msg-nick { visibility:hidden; } |
| 149 | .msg-grouped .msg-time { color:transparent; } |
| 150 | .msg-grouped:hover .msg-time { color:#8b949e; transition:color .1s; } |
| 151 | .chat-nicklist { width:148px; min-width:0; flex-shrink:0; border-left:1px solid #30363d; display:flex; flex-direction:column; background:#161b22; overflow-y:auto; overflow-x:hidden; transition:width .15s; } |
| 152 | .chat-nicklist.collapsed { width:28px; overflow:hidden; } |
| @@ -246,13 +246,17 @@ | |
| 246 | .filter-bar input { max-width:100% !important; flex:1; min-width:0; } |
| 247 | |
| 248 | /* login */ |
| 249 | .login-box { width:90vw; max-width:340px; } |
| 250 | |
| 251 | /* message nicks: narrower */ |
| 252 | .msg-nick { min-width:60px; } |
| 253 | .msg-time { min-width:32px; } |
| 254 | } |
| 255 | </style> |
| 256 | <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> |
| 257 | </head> |
| 258 | <body> |
| 259 |
| --- internal/api/ui/index.html | |
| +++ internal/api/ui/index.html | |
| @@ -139,14 +139,14 @@ | |
| 139 | .chan-item.active { background:#1f6feb22; color:#58a6ff; border-left:2px solid #58a6ff; padding-left:12px; } |
| 140 | .chat-main { flex:1; display:flex; flex-direction:column; min-width:0; } |
| 141 | .chat-topbar { padding:9px 16px; border-bottom:1px solid #30363d; display:flex; align-items:center; gap:10px; flex-shrink:0; background:#161b22; font-size:13px; } |
| 142 | .chat-ch-name { font-weight:600; color:#58a6ff; } |
| 143 | .stream-badge { font-size:11px; color:#8b949e; margin-left:auto; } |
| 144 | .chat-msgs { flex:1; overflow-y:auto; padding:4px 8px; display:flex; flex-direction:column; gap:0; } |
| 145 | .msg-row { display:flex; gap:6px; font-size:13px; line-height:1.4; padding:1px 0; } |
| 146 | .msg-time { color:#8b949e; font-size:11px; flex-shrink:0; padding-top:2px; min-width:36px; } |
| 147 | .msg-nick { font-weight:600; flex-shrink:0; min-width:80px; text-align:right; } |
| 148 | .msg-grouped .msg-nick { visibility:hidden; } |
| 149 | .msg-grouped .msg-time { color:transparent; } |
| 150 | .msg-grouped:hover .msg-time { color:#8b949e; transition:color .1s; } |
| 151 | .chat-nicklist { width:148px; min-width:0; flex-shrink:0; border-left:1px solid #30363d; display:flex; flex-direction:column; background:#161b22; overflow-y:auto; overflow-x:hidden; transition:width .15s; } |
| 152 | .chat-nicklist.collapsed { width:28px; overflow:hidden; } |
| @@ -246,13 +246,17 @@ | |
| 246 | .filter-bar input { max-width:100% !important; flex:1; min-width:0; } |
| 247 | |
| 248 | /* login */ |
| 249 | .login-box { width:90vw; max-width:340px; } |
| 250 | |
| 251 | /* chat: tighter on mobile */ |
| 252 | .chat-msgs { padding:2px 4px; } |
| 253 | .msg-row { gap:4px; font-size:12px; line-height:1.3; } |
| 254 | .msg-nick { min-width:0; max-width:70px; overflow:hidden; text-overflow:ellipsis; } |
| 255 | .msg-time { min-width:28px; font-size:10px; } |
| 256 | .chat-input { padding:6px 8px; } |
| 257 | .chat-topbar { padding:6px 10px; gap:6px; font-size:12px; } |
| 258 | } |
| 259 | </style> |
| 260 | <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> |
| 261 | </head> |
| 262 | <body> |
| 263 |