From c9474e4c59c98087daa15fa74665c8c0dc4e999c Mon Sep 17 00:00:00 2001
From: hfcRed <hfcred@gmx.net>
Date: Sun, 18 Jan 2026 12:10:13 +0100
Subject: [PATCH] Scrollbar styles

---
 app/components/MobileNav.tsx | 2 +-
 app/styles/vars.css          | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/components/MobileNav.tsx b/app/components/MobileNav.tsx
index 0717dc6cd..1f6a3dbcf 100644
--- a/app/components/MobileNav.tsx
+++ b/app/components/MobileNav.tsx
@@ -238,7 +238,7 @@ function MenuOverlay({
 
 	return (
 		<ModalOverlay className={styles.panelOverlay} isOpen isDismissable={false}>
-			<Modal className={styles.menuOverlay}>
+			<Modal className={clsx(styles.menuOverlay, "scrollbar")}>
 				<Dialog className={styles.panelDialog}>
 					<header className={styles.menuHeader}>
 						<h2 className={styles.menuTitle}>{t("front:mobileNav.menu")}</h2>
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 3ca9e690a..071b24f6f 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -114,6 +114,8 @@ html.light {
 	--input-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(90, 90, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
+/* These are the vars you mainly care about */
+
 html {
 	--color-text: var(--color-base-0);
 	--color-text-high: var(--color-base-3);
@@ -140,11 +142,10 @@ html {
 	--input-line-height: 1.2rem;
 	--input-focus-ring: var(--border-style-accent);
 	--input-focus-ring-error: 2px solid var(--color-error);
+	--input-icon-width: 18px;
 
 	--selector-height: 1.25rem;
 
-	--input-icon-width: 18px;
-
 	--layout-nav-height: 55px;
 	--layout-sidenav-width: 250px;
 	--layout-main-padding: var(--s-4);