unify scrollbars and fix tunnel spinner
3clyp50 committed
Jan 2, 2026 at 11:57 UTC
8c3daa68eace14862b4ae417e2f61ecc19daee1d
7 files changed
+82
-19
webui/components/modals/image-viewer/image-viewer.html
+22
@@ -68,6 +68,28 @@
68
position: relative;
69
}
70
71
+ /* Unified scrollbar styling for modal content */
72
+ .image-display-wrapper::-webkit-scrollbar {
73
+ width: 6px;
74
+ height: 6px;
75
+ }
76
+
77
+ .image-display-wrapper::-webkit-scrollbar-track {
78
+ background: transparent;
79
+ margin: 4px 0;
80
+ border-radius: 6px;
81
+ }
82
+
83
+ .image-display-wrapper::-webkit-scrollbar-thumb {
84
+ background-color: rgba(155, 155, 155, 0.5);
85
+ border-radius: 6px;
86
+ transition: background-color 0.2s ease;
87
+ }
88
+
89
+ .image-display-wrapper::-webkit-scrollbar-thumb:hover {
90
+ background-color: rgba(155, 155, 155, 0.7);
91
+ }
92
+
93
.modal-image {
94
max-width: 100%;
95
max-height: 100%;
webui/components/modals/memory/memory-detail-modal.html
+35
@@ -308,6 +308,41 @@
308
overflow-y: auto;
309
max-height: 50em;
310
}
311
+
312
+ /* Unified scrollbar styling for modal content */
313
+ .memory-content-display p::-webkit-scrollbar,
314
+ textarea.memory-content-display::-webkit-scrollbar {
315
+ width: 6px;
316
+ height: 6px;
317
+ }
318
+
319
+ .memory-content-display p::-webkit-scrollbar-track,
320
+ textarea.memory-content-display::-webkit-scrollbar-track {
321
+ background: transparent;
322
+ margin: 4px 0;
323
+ border-radius: 6px;
324
+ }
325
+
326
+ .memory-content-display p::-webkit-scrollbar-thumb,
327
+ textarea.memory-content-display::-webkit-scrollbar-thumb {
328
+ background-color: rgba(155, 155, 155, 0.5);
329
+ border-radius: 6px;
330
+ transition: background-color 0.2s ease;
331
+ }
332
+
333
+ .memory-content-display p::-webkit-scrollbar-thumb:hover,
334
+ textarea.memory-content-display::-webkit-scrollbar-thumb:hover {
335
+ background-color: rgba(155, 155, 155, 0.7);
336
+ }
337
+
338
+ /* Transparent scrollbar for metadata sidebar */
339
+ .metadata-sidebar {
340
+ scrollbar-width: none; /* Firefox */
341
+ }
342
+
343
+ .metadata-sidebar::-webkit-scrollbar {
344
+ display: none; /* Chrome/Safari/Webkit */
345
+ }
346
347
.metadata-sidebar h4 {
348
margin: 0 0 1rem 0;
webui/components/notifications/notification-modal.html
+3
-2
@@ -140,12 +140,13 @@
140
}
141
142
.notification-list::-webkit-scrollbar-thumb {
143
- background-color: rgba(155, 155, 155, 0.3);
143
+ background-color: rgba(155, 155, 155, 0.5);
144
border-radius: 6px;
145
+ transition: background-color 0.2s ease;
146
}
147
148
.notification-list::-webkit-scrollbar-thumb:hover {
148
- background-color: rgba(155, 155, 155, 0.5);
149
+ background-color: rgba(155, 155, 155, 0.7);
150
}
151
152
/* Include all the notification item styles from the CSS file */
webui/components/settings/settings.html
+10
-10
@@ -55,21 +55,21 @@
55
56
<!-- Settings sections for agent, external, developer, mcp, backup tabs -->
57
<div id="settings-sections">
58
- <template x-if="$store.settingsStore.activeTab === 'agent'">
58
+ <div x-show="$store.settingsStore.activeTab === 'agent'">
59
<x-component path="settings/agent/agent-settings.html"></x-component>
60
- </template>
61
- <template x-if="$store.settingsStore.activeTab === 'external'">
60
+ </div>
61
+ <div x-show="$store.settingsStore.activeTab === 'external'">
62
<x-component path="settings/external/external-settings.html"></x-component>
63
- </template>
64
- <template x-if="$store.settingsStore.activeTab === 'mcp'">
63
+ </div>
64
+ <div x-show="$store.settingsStore.activeTab === 'mcp'">
65
<x-component path="settings/mcp/mcp-settings.html"></x-component>
66
- </template>
67
- <template x-if="$store.settingsStore.activeTab === 'developer'">
66
+ </div>
67
+ <div x-show="$store.settingsStore.activeTab === 'developer'">
68
<x-component path="settings/developer/developer-settings.html"></x-component>
69
- </template>
70
- <template x-if="$store.settingsStore.activeTab === 'backup'">
69
+ </div>
70
+ <div x-show="$store.settingsStore.activeTab === 'backup'">
71
<x-component path="settings/backup/backup-settings.html"></x-component>
72
- </template>
72
+ </div>
73
</div>
74
</div>
75
webui/components/settings/tunnel/tunnel-section.html
+3
-3
@@ -36,7 +36,7 @@
36
</div>
37
</div>
38
<!-- Loading spinner for tunnel operations -->
39
- <div class="loading-spinner" x-show="$store.tunnelStore.isLoading">
39
+ <div class="tunnel-loading-status" x-show="$store.tunnelStore.isLoading">
40
<span class="icon material-symbols-outlined spin">progress_activity</span>
41
<span x-text="$store.tunnelStore.loadingText || 'Processing tunnel request...'"></span>
42
</div>
@@ -164,7 +164,7 @@
164
line-height: 1.5;
165
}
166
167
- .loading-spinner {
167
+ .tunnel-loading-status {
168
display: flex;
169
justify-content: center;
170
align-items: center;
@@ -175,7 +175,7 @@
175
color: var(--text-color-secondary);
176
}
177
178
- .loading-spinner i {
178
+ .tunnel-loading-status .icon {
179
font-size: 1.5rem;
180
margin-right: 10px;
181
color: var(--accent-color);
webui/css/modals.css
+1
-1
@@ -162,7 +162,7 @@ some classes like modal-header are shared between the old and the new system */
162
margin: 4px 0;
163
border-radius: 6px;
164
}
165
-.modal-content::-webkit-scrollbar-thumb, .modal-scroll::webkit-scrollbar-thumb {
165
+.modal-content::-webkit-scrollbar-thumb, .modal-scroll::-webkit-scrollbar-thumb {
166
background-color: rgba(155, 155, 155, 0.5);
167
border-radius: 6px;
168
transition: background-color 0.2s ease;
webui/css/settings.css
+8
-3
@@ -302,7 +302,6 @@ nav ul li a img {
302
z-index: 1;
303
min-width: min-content;
304
width: auto;
305
- max-width: 100px;
305
overflow: hidden;
306
text-overflow: ellipsis;
307
white-space: nowrap;
@@ -323,6 +322,8 @@ nav ul li a img {
322
-4px 0 8px -2px var(--color-border); */
323
font-weight: bold;
324
background-color: var(--color-panel);
325
+ min-width: min-content;
326
+ max-width: 150px;
327
}
328
329
/* Light mode overrides */
@@ -367,8 +368,12 @@ nav ul li a img {
368
.settings-tab {
369
flex: 0 0 auto;
370
text-align: center;
370
- min-width: 60px;
371
- max-width: 80px;
371
+ min-width: min-content;
372
+ max-width: 150px;
373
+ }
374
+ .settings-tab.active {
375
+ min-width: min-content;
376
+ max-width: 150px;
377
}
378
}
379