From 042ac65628e744912d541b021cf898f7bed6ec6d Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 2 Nov 2026 11:48:53 +0900
Subject: [PATCH] refac

---
 src/app.css                                   | 49 ++++++++++---------
 src/app.html                                  |  7 +++
 src/lib/components/chat/Chat.svelte           |  2 +-
 .../components/common/PdfPagesPreview.svelte  | 31 ++++++------
 src/lib/components/common/PptxPreview.svelte  | 31 ++++++------
 5 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/src/app.css b/src/app.css
index 6d58a8cb9a..b5bc3f341c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -103,8 +103,7 @@ textarea {
 	color-scheme: dark;
 }
 
-textarea::-webkit-resizer,
-textarea::-webkit-scrollbar-corner {
+textarea::-webkit-resizer {
 	background: transparent;
 }
 
@@ -161,7 +160,11 @@ li p {
 	display: inline;
 }
 
-::-webkit-scrollbar-thumb {
+:where(html:not(.native-scrollbars)) textarea::-webkit-scrollbar-corner {
+	background: transparent;
+}
+
+:where(html:not(.native-scrollbars), html:not(.native-scrollbars) *)::-webkit-scrollbar-thumb {
 	--tw-border-opacity: 1;
 	background-color: rgba(215, 215, 215, 0.6);
 	border-color: rgba(255, 255, 255, var(--tw-border-opacity));
@@ -170,17 +173,17 @@ li p {
 }
 
 /* Dark theme scrollbar styles */
-.dark ::-webkit-scrollbar-thumb {
+:where(html:not(.native-scrollbars)).dark ::-webkit-scrollbar-thumb {
 	background-color: rgba(67, 67, 67, 0.6); /* Darker color for dark theme */
 	border-color: rgba(0, 0, 0, var(--tw-border-opacity));
 }
 
-::-webkit-scrollbar {
+:where(html:not(.native-scrollbars), html:not(.native-scrollbars) *)::-webkit-scrollbar {
 	height: 0.45rem;
 	width: 0.45rem;
 }
 
-::-webkit-scrollbar-track {
+:where(html:not(.native-scrollbars), html:not(.native-scrollbars) *)::-webkit-scrollbar-track {
 	background-color: transparent;
 	border-radius: 9999px;
 }
@@ -298,16 +301,17 @@ body > iframe[id^='imermaid-'] {
 	overflow: hidden !important;
 }
 
-.scrollbar-hidden:active::-webkit-scrollbar-thumb,
-.scrollbar-hidden:focus::-webkit-scrollbar-thumb,
-.scrollbar-hidden:hover::-webkit-scrollbar-thumb {
+:where(html:not(.native-scrollbars)) .scrollbar-hidden:active::-webkit-scrollbar-thumb,
+:where(html:not(.native-scrollbars)) .scrollbar-hidden:focus::-webkit-scrollbar-thumb,
+:where(html:not(.native-scrollbars)) .scrollbar-hidden:hover::-webkit-scrollbar-thumb {
 	visibility: visible;
 }
-.scrollbar-hidden::-webkit-scrollbar-thumb {
+
+:where(html:not(.native-scrollbars)) .scrollbar-hidden::-webkit-scrollbar-thumb {
 	visibility: hidden;
 }
 
-.scrollbar-hidden::-webkit-scrollbar-corner {
+:where(html:not(.native-scrollbars)) .scrollbar-hidden::-webkit-scrollbar-corner {
 	display: none;
 }
 
@@ -339,21 +343,22 @@ input[type='number'] {
 	@apply overflow-y-hidden overflow-x-auto max-w-full;
 }
 
-.katex-display::-webkit-scrollbar {
+:where(html:not(.native-scrollbars)) .katex-display::-webkit-scrollbar {
 	height: 0.4rem;
 	width: 0.4rem;
 }
 
-.katex-display:active::-webkit-scrollbar-thumb,
-.katex-display:focus::-webkit-scrollbar-thumb,
-.katex-display:hover::-webkit-scrollbar-thumb {
+:where(html:not(.native-scrollbars)) .katex-display:active::-webkit-scrollbar-thumb,
+:where(html:not(.native-scrollbars)) .katex-display:focus::-webkit-scrollbar-thumb,
+:where(html:not(.native-scrollbars)) .katex-display:hover::-webkit-scrollbar-thumb {
 	visibility: visible;
 }
-.katex-display::-webkit-scrollbar-thumb {
+
+:where(html:not(.native-scrollbars)) .katex-display::-webkit-scrollbar-thumb {
 	visibility: hidden;
 }
 
-.katex-display::-webkit-scrollbar-corner {
+:where(html:not(.native-scrollbars)) .katex-display::-webkit-scrollbar-corner {
 	display: none;
 }
 
@@ -362,17 +367,17 @@ input[type='number'] {
 	width: 100%;
 }
 
-.cm-scroller:active::-webkit-scrollbar-thumb,
-.cm-scroller:focus::-webkit-scrollbar-thumb,
-.cm-scroller:hover::-webkit-scrollbar-thumb {
+:where(html:not(.native-scrollbars)) .cm-scroller:active::-webkit-scrollbar-thumb,
+:where(html:not(.native-scrollbars)) .cm-scroller:focus::-webkit-scrollbar-thumb,
+:where(html:not(.native-scrollbars)) .cm-scroller:hover::-webkit-scrollbar-thumb {
 	visibility: visible;
 }
 
-.cm-scroller::-webkit-scrollbar-thumb {
+:where(html:not(.native-scrollbars)) .cm-scroller::-webkit-scrollbar-thumb {
 	visibility: hidden;
 }
 
-.cm-scroller::-webkit-scrollbar-corner {
+:where(html:not(.native-scrollbars)) .cm-scroller::-webkit-scrollbar-corner {
 	display: none;
 }
 
diff --git a/src/app.html b/src/app.html
index 28a7135a1b..6797f46469 100644
--- a/src/app.html
+++ b/src/app.html
@@ -47,6 +47,13 @@
 		<script>
 			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
 			(() => {
+				document.documentElement.classList.toggle(
+					'native-scrollbars',
+					/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ||
+						// iPadOS can report a desktop Mac user agent.
+						(/Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints > 1)
+				);
+
 				const metaThemeColorTag = document.querySelector('meta[name="theme-color"]');
 				const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index 9343c94840..4fcdd35d15 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -5702,7 +5702,7 @@
 </div>
 
 <style>
-	::-webkit-scrollbar {
+	:global(:where(html:not(.native-scrollbars))) ::-webkit-scrollbar {
 		height: 0.5rem;
 		width: 0.5rem;
 	}
diff --git a/src/lib/components/common/PdfPagesPreview.svelte b/src/lib/components/common/PdfPagesPreview.svelte
index 66f27df1ee..3c8cf21503 100644
--- a/src/lib/components/common/PdfPagesPreview.svelte
+++ b/src/lib/components/common/PdfPagesPreview.svelte
@@ -219,36 +219,37 @@
 </div>
 
 <style>
-	.thumbnail-sidebar {
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar {
 		scrollbar-color: transparent transparent;
 	}
 
-	.thumbnail-sidebar:hover,
-	.thumbnail-sidebar:focus,
-	.thumbnail-sidebar:focus-within,
-	.thumbnail-sidebar:active {
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:hover,
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus,
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus-within,
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:active {
 		scrollbar-color: rgba(215, 215, 215, 0.6) transparent;
 	}
 
-	:global(.dark) .thumbnail-sidebar:hover,
-	:global(.dark) .thumbnail-sidebar:focus,
-	:global(.dark) .thumbnail-sidebar:focus-within,
-	:global(.dark) .thumbnail-sidebar:active {
+	:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:hover,
+	:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:focus,
+	:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:focus-within,
+	:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:active {
 		scrollbar-color: rgba(67, 67, 67, 0.6) transparent;
 	}
 
-	.thumbnail-sidebar::-webkit-scrollbar-thumb {
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar::-webkit-scrollbar-thumb {
 		visibility: hidden;
 	}
 
-	.thumbnail-sidebar:hover::-webkit-scrollbar-thumb,
-	.thumbnail-sidebar:focus::-webkit-scrollbar-thumb,
-	.thumbnail-sidebar:focus-within::-webkit-scrollbar-thumb,
-	.thumbnail-sidebar:active::-webkit-scrollbar-thumb {
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:hover::-webkit-scrollbar-thumb,
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus::-webkit-scrollbar-thumb,
+	:global(:where(html:not(.native-scrollbars)))
+		.thumbnail-sidebar:focus-within::-webkit-scrollbar-thumb,
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:active::-webkit-scrollbar-thumb {
 		visibility: visible;
 	}
 
-	.thumbnail-sidebar::-webkit-scrollbar-corner {
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar::-webkit-scrollbar-corner {
 		display: none;
 	}
 </style>
diff --git a/src/lib/components/common/PptxPreview.svelte b/src/lib/components/common/PptxPreview.svelte
index 2d51fc726b..c44a2ff551 100644
--- a/src/lib/components/common/PptxPreview.svelte
+++ b/src/lib/components/common/PptxPreview.svelte
@@ -436,36 +436,37 @@
 </div>
 
 <style>
-	.thumbnail-sidebar {
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar {
 		scrollbar-color: transparent transparent;
 	}
 
-	.thumbnail-sidebar:hover,
-	.thumbnail-sidebar:focus,
-	.thumbnail-sidebar:focus-within,
-	.thumbnail-sidebar:active {
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:hover,
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus,
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus-within,
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:active {
 		scrollbar-color: rgba(215, 215, 215, 0.6) transparent;
 	}
 
-	:global(.dark) .thumbnail-sidebar:hover,
-	:global(.dark) .thumbnail-sidebar:focus,
-	:global(.dark) .thumbnail-sidebar:focus-within,
-	:global(.dark) .thumbnail-sidebar:active {
+	:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:hover,
+	:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:focus,
+	:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:focus-within,
+	:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:active {
 		scrollbar-color: rgba(67, 67, 67, 0.6) transparent;
 	}
 
-	.thumbnail-sidebar::-webkit-scrollbar-thumb {
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar::-webkit-scrollbar-thumb {
 		visibility: hidden;
 	}
 
-	.thumbnail-sidebar:hover::-webkit-scrollbar-thumb,
-	.thumbnail-sidebar:focus::-webkit-scrollbar-thumb,
-	.thumbnail-sidebar:focus-within::-webkit-scrollbar-thumb,
-	.thumbnail-sidebar:active::-webkit-scrollbar-thumb {
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:hover::-webkit-scrollbar-thumb,
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus::-webkit-scrollbar-thumb,
+	:global(:where(html:not(.native-scrollbars)))
+		.thumbnail-sidebar:focus-within::-webkit-scrollbar-thumb,
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:active::-webkit-scrollbar-thumb {
 		visibility: visible;
 	}
 
-	.thumbnail-sidebar::-webkit-scrollbar-corner {
+	:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar::-webkit-scrollbar-corner {
 		display: none;
 	}
 </style>