no-scrollbar utility class
single scrollbar in modals
3clyp50 committed
Feb 1, 2026 at 16:19 UTC
817c580b36d1b8c7cf9562757c813119ed97a222
14 files changed
+54
-103
webui/components/chat/message-queue/message-queue.html
+1
-11
@@ -21,7 +21,7 @@
21
</button>
22
</div>
23
</div>
24
- <div class="queue-items">
24
+ <div class="queue-items no-scrollbar">
25
<template x-for="(item, index) in $store.messageQueue.allItems" :key="item.id">
26
<div class="queue-item" :class="{ 'queue-item-pending': item.pending }">
27
<div class="queue-item-content">
@@ -120,16 +120,6 @@
120
overflow-y: auto;
121
}
122
123
- .queue-items::-webkit-scrollbar {
124
- flex: 1;
125
- min-height: 0;
126
- overflow: scroll;
127
- scroll-behavior: smooth;
128
- max-height: 100%;
129
- scrollbar-width: none;
130
- -ms-overflow-style: none;
131
- }
132
-
123
.queue-item {
124
display: flex;
125
align-items: center;
webui/components/messages/process-group/process-group.css
+17
-18
@@ -464,12 +464,24 @@
464
transition: grid-template-rows 0.2s ease-out, opacity 0.15s ease-out, margin-top 0.2s ease-out;
465
overflow: hidden;
466
-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
467
- scrollbar-width: none; /* Firefox */
468
- -ms-overflow-style: none; /* IE/Edge */
467
overscroll-behavior: contain; /* avoid scroll chaining */
468
max-width: 100%;
469
}
470
471
+.process-step-detail,
472
+.process-step-detail-scroll {
473
+ scrollbar-width: none; /* Firefox */
474
+ -ms-overflow-style: none; /* IE/Edge */
475
+}
476
+
477
+/* Hide scrollbar for Chrome/Safari/Webkit */
478
+.process-step-detail::-webkit-scrollbar,
479
+.process-step-detail-scroll::-webkit-scrollbar {
480
+ display: none;
481
+ width: 0;
482
+ height: 0;
483
+}
484
+
485
.process-step:not(.expanded) > .process-step-detail {
486
margin-top: 0;
487
}
@@ -480,18 +492,6 @@
492
max-height: 0;
493
overflow: hidden;
494
}
483
- /* Hide scrollbar for Chrome/Safari/Webkit */
484
-.process-step-detail::-webkit-scrollbar {
485
- display: none;
486
- width: 0;
487
- height: 0;
488
-}
489
-
490
-.process-step-detail-scroll::-webkit-scrollbar {
491
- display: none;
492
- width: 0;
493
- height: 0;
494
-}
495
496
.process-step-detail > .process-step-detail-scroll {
497
min-height: 0;
@@ -514,8 +514,9 @@
514
box-sizing: content-box;
515
border-radius: var(--border-radius-sm);
516
-webkit-overflow-scrolling: touch;
517
- scrollbar-width: thin;
518
- scrollbar-color: rgba(255,255,255,0.2) transparent;
517
+ scrollbar-width: none;
518
+ -ms-overflow-style: none;
519
+ scrollbar-color: transparent;
520
/* overscroll-behavior: contain; */
521
}
522
@@ -531,8 +532,6 @@
532
font-size: var(--font-size-xs);
533
line-height: 1.5;
534
-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
534
- scrollbar-width: none; /* Firefox */
535
- -ms-overflow-style: none; /* IE/Edge */
535
overscroll-behavior-x: contain; /* avoid scroll chaining */
536
}
537
webui/components/modals/context/context.html
+1
-5
@@ -27,7 +27,7 @@
27
28
<!-- Content (ACE Editor) -->
29
<template x-if="!$store.context.isLoading && !$store.context.error">
30
- <div id="context-viewer-container"></div>
30
+ <div id="context-viewer-container" class="no-scrollbar"></div>
31
</template>
32
33
</div>
@@ -87,10 +87,6 @@
87
overflow: auto;
88
}
89
90
- #context-viewer-container::-webkit-scrollbar {
91
- width: 0;
92
- }
93
-
90
/* ACE Editor Scrollbar */
91
.ace_scrollbar-v {
92
overflow-y: auto;
webui/components/modals/file-editor/file-edit-modal.html
+1
-7
@@ -39,7 +39,7 @@
39
</div>
40
<div class="file-edit-path" x-text="$store.fileEditor.editPathLabel()"></div>
41
</div>
42
- <div id="file-editor-container"></div>
42
+ <div id="file-editor-container" class="no-scrollbar"></div>
43
</div>
44
</template>
45
</div>
@@ -121,12 +121,6 @@
121
min-height: 55vh;
122
border-radius: 0.4rem;
123
overflow: auto;
124
- scrollbar-gutter: stable;
125
- scrollbar-width: thin;
126
- }
127
-
128
- #file-editor-container::-webkit-scrollbar {
129
- width: 8px;
124
}
125
126
.ace_scrollbar-v {
webui/components/modals/history/history.html
+1
-5
@@ -27,7 +27,7 @@
27
28
<!-- Content (ACE Editor) -->
29
<template x-if="!$store.history.isLoading && !$store.history.error">
30
- <div id="history-viewer-container"></div>
30
+ <div id="history-viewer-container" class="no-scrollbar"></div>
31
</template>
32
33
</div>
@@ -87,10 +87,6 @@
87
overflow: auto;
88
}
89
90
- #history-viewer-container::-webkit-scrollbar {
91
- width: 0;
92
- }
93
-
90
/* ACE Editor Scrollbar */
91
.ace_scrollbar-v {
92
overflow-y: auto;
webui/components/modals/memory/memory-detail-modal.html
+1
-10
@@ -86,7 +86,7 @@
86
</div>
87
88
<!-- Metadata Sidebar -->
89
- <div class="metadata-sidebar">
89
+ <div class="metadata-sidebar no-scrollbar">
90
<h4>Metadata</h4>
91
92
<!-- Basic Info -->
@@ -333,15 +333,6 @@
333
background-color: rgba(155, 155, 155, 0.7);
334
}
335
336
- /* Transparent scrollbar for metadata sidebar */
337
- .metadata-sidebar {
338
- scrollbar-width: none; /* Firefox */
339
- }
340
-
341
- .metadata-sidebar::-webkit-scrollbar {
342
- display: none; /* Chrome/Safari/Webkit */
343
- }
344
-
336
.metadata-sidebar h4 {
337
margin: 0 0 1rem 0;
338
color: var(--color-text);
webui/components/modals/process-step-detail/process-step-detail.html
+10
-14
@@ -1,4 +1,4 @@
1
-<html>
1
+<html class="step-detail-modal">
2
3
<head>
4
<title>Step Details</title>
@@ -172,6 +172,15 @@
172
padding: 1rem;
173
}
174
175
+ .modal-inner.step-detail-modal .modal-scroll {
176
+ scrollbar-width: none;
177
+ -ms-overflow-style: none;
178
+ }
179
+
180
+ .modal-inner.step-detail-modal .modal-scroll::-webkit-scrollbar {
181
+ display: none;
182
+ }
183
+
184
.raw-json-section {
185
height: 100%;
186
display: flex;
@@ -258,19 +267,6 @@
267
pointer-events: auto;
268
}
269
261
- .modal-scroll::-webkit-scrollbar {
262
- scrollbar-width: none;
263
- -ms-overflow-style: none;
264
- }
265
-
266
- .modal-scroll::-webkit-scrollbar-track {
267
- background: transparent;
268
- }
269
-
270
- .modal-scroll::-webkit-scrollbar-thumb {
271
- background: transparent;
272
- }
273
-
270
.modal-body::-webkit-scrollbar,
271
.result-content::-webkit-scrollbar {
272
width: 6px;
webui/components/settings/mcp/client/mcp-servers.html
+9
@@ -74,6 +74,15 @@
74
75
<style>
76
77
+ .modal-inner .modal-scroll {
78
+ scrollbar-width: none;
79
+ -ms-overflow-style: none;
80
+ }
81
+
82
+ .modal-inner .modal-scroll::-webkit-scrollbar {
83
+ display: none;
84
+ }
85
+
86
.mcp-servers-loading {
87
width: 100%;
88
text-align: center;
webui/components/settings/settings.html
+1
-1
@@ -29,7 +29,7 @@
29
<div x-show="$store.settingsStore.settings" class="settings-content">
30
<!-- Tab Navigation -->
31
<div class="settings-tabs-container">
32
- <div class="settings-tabs">
32
+ <div class="settings-tabs no-scrollbar">
33
<div class="settings-tab"
34
:class="{'active': $store.settingsStore.activeTab === 'agent'}"
35
@click="$store.settingsStore.switchTab('agent')"
webui/components/sidebar/chats/chats-list.html
+1
-10
@@ -20,7 +20,7 @@
20
21
22
23
- <ul class="config-list chats-config-list" x-show="$store.chats.contexts.length > 0">
23
+ <ul class="config-list chats-config-list no-scrollbar" x-show="$store.chats.contexts.length > 0">
24
<template x-for="context in $store.chats.contexts" :key="context.id">
25
<li>
26
<div :class="{'chat-container': true, 'chat-selected': context.id === $store.chats.selected}"
@@ -76,15 +76,6 @@
76
overflow: scroll;
77
scroll-behavior: smooth;
78
max-height: 100%;
79
- scrollbar-width: none;
80
- /* Firefox */
81
- -ms-overflow-style: none;
82
- /* IE/Edge */
83
- }
84
-
85
- /* Hide scrollbar for Chrome/Safari/Webkit */
86
- .chats-config-list::-webkit-scrollbar {
87
- display: none;
79
}
80
81
.chat-container {
webui/components/sidebar/left-sidebar.html
+1
-7
@@ -12,7 +12,7 @@
12
<template x-if="$store.sidebar">
13
<div id="left-panel" class="panel" x-data :class="{'hidden': !$store.sidebar.isOpen}">
14
<!--Sidebar upper elements-->
15
- <div class="left-panel-top">
15
+ <div class="left-panel-top no-scrollbar">
16
<!-- Top Section: Header Icons + Quick Actions -->
17
<x-component path="sidebar/top-section/sidebar-top.html"></x-component>
18
<!-- Chats List -->
@@ -85,12 +85,6 @@
85
justify-content: space-between;
86
margin-top: 3.5rem;
87
padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
88
- scrollbar-width: none;
89
- -ms-overflow-style: none;
90
- }
91
-
92
- .left-panel-top::-webkit-scrollbar {
93
- width: 0px;
88
}
89
90
.left-panel-bottom {
webui/components/sidebar/tasks/tasks-list.html
+1
-9
@@ -21,7 +21,7 @@
21
x-effect="(() => { const c = bootstrap.Collapse.getOrCreateInstance($el, { toggle: false }); $store.sidebar.isSectionOpen('tasks') ? c.show() : c.hide(); })()">
22
<div class="tasks-list-body">
23
<div class="tasks-list-container" x-data>
24
- <ul class="config-list tasks-config-list" x-show="$store.tasks.tasks.length > 0">
24
+ <ul class="config-list tasks-config-list no-scrollbar" x-show="$store.tasks.tasks.length > 0">
25
<template x-for="task in $store.tasks.tasks" :key="task.id">
26
<li>
27
<div class="task-container" :class="{'task-selected': task.id === $store.tasks.selected}">
@@ -107,16 +107,8 @@
107
overflow-y: auto;
108
-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
109
scroll-behavior: smooth;
110
- scrollbar-width: none; /* Firefox */
111
- -ms-overflow-style: none; /* IE/Edge */
110
overscroll-behavior: contain; /* avoid scroll chaining */
111
}
114
- /* Hide scrollbar for Chrome/Safari/Webkit */
115
- .tasks-config-list::-webkit-scrollbar {
116
- display: none;
117
- width: 0;
118
- height: 0;
119
- }
112
113
.task-title-line {
114
display: flex;
webui/css/settings.css
-6
@@ -262,16 +262,10 @@ nav ul li a img {
262
padding-top: 8px;
263
overflow-x: auto;
264
overflow-y: hidden;
265
- scrollbar-width: none;
266
- -ms-overflow-style: none;
265
white-space: nowrap;
266
-webkit-overflow-scrolling: touch;
267
}
268
271
-.settings-tabs::-webkit-scrollbar {
272
- display: none;
273
-}
274
-
269
.settings-tabs::before,
270
.settings-tabs::after {
271
content: '';
webui/index.css
+9
@@ -1563,6 +1563,15 @@ nav ul li a img {
1563
display: none !important;
1564
}
1565
1566
+.no-scrollbar {
1567
+ scrollbar-width: none; /* Firefox */
1568
+ -ms-overflow-style: none; /* IE/Edge */
1569
+}
1570
+
1571
+.no-scrollbar::-webkit-scrollbar {
1572
+ display: none; /* Chrome/Safari/Webkit */
1573
+}
1574
+
1575
body * {
1576
scrollbar-width: thin;
1577
scrollbar-color: #555 transparent;