From 27a07e0891d32635245b9c4ccf6037227f1c1ce7 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Thu, 15 Jan 2026 13:51:38 -0600
Subject: [PATCH] fix: page transition hides scrollbar, avoid scrollbar pop-in
 on load via fade-in

---
 web/src/app.css | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 5191471..19ced52 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -104,6 +104,29 @@ html.dark {
   border-radius: 4px;
 }
 
+/* Give scrollbars unique view-transition-names so they persist through page transitions */
+.os-scrollbar-horizontal {
+  view-transition-name: scrollbar-h;
+}
+
+.os-scrollbar-vertical {
+  view-transition-name: scrollbar-v;
+}
+
+/* Fade in scrollbars on initial page load */
+@keyframes scrollbar-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.os-scrollbar {
+  animation: scrollbar-fade-in 300ms ease-out;
+}
+
 /* Native scrollbars for other elements (Webkit: Chrome, Safari, Edge) */
 html:not(.dark) ::-webkit-scrollbar {
   width: 10px;
@@ -190,15 +213,19 @@ body::-webkit-scrollbar {
   mix-blend-mode: normal;
 }
 
-/* Persistent elements (background with dots, theme toggle) - excluded from page transitions */
+/* Persistent elements (background, theme toggle, scrollbars) - excluded from page transitions */
 /* Hide old snapshots entirely so only the live element shows (prevents doubling/ghosting) */
 ::view-transition-old(background),
-::view-transition-old(theme-toggle) {
+::view-transition-old(theme-toggle),
+::view-transition-old(scrollbar-h),
+::view-transition-old(scrollbar-v) {
   display: none;
 }
 
 ::view-transition-new(background),
-::view-transition-new(theme-toggle) {
+::view-transition-new(theme-toggle),
+::view-transition-new(scrollbar-h),
+::view-transition-new(scrollbar-v) {
   animation: none;
 }