scroll fixes

internal/embedfs/web/css/input.css

@@ -129,72 +129,29 @@
 }
 
 /* Custom Scrollbar Styles - Catppuccin Theme */
+/* Only applied to specific elements (viewport, dropdowns, modals) to avoid
+   overriding the browser default scrollbar on the html/body level */
 
-/* Firefox */
+/* Main content viewport */
-* {
+#page-viewport {
+  --scrollbar-thumb: var(--overlay0);
+  --scrollbar-track: var(--base);
+  scrollbar-width: normal;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* Multi-select dropdowns */
+.multi-select-dropdown {
+  --scrollbar-thumb: var(--surface2);
+  --scrollbar-track: var(--base);
   scrollbar-width: thin;
-  scrollbar-color: var(--surface1) var(--mantle);
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 
-/* Webkit browsers (Chrome, Safari, Edge) */
+/* Modal content */
-::-webkit-scrollbar {
+.modal-scrollable {
-  width: 8px;
+  --scrollbar-thumb: var(--surface1);
-  height: 8px;
+  --scrollbar-track: var(--base);
-}
+  scrollbar-width: thin;
-
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-::-webkit-scrollbar-track {
-  background: var(--mantle);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--surface1);
-  border-radius: 4px;
-  border: 2px solid var(--mantle);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--surface2);
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: var(--overlay0);
-}
-
-/* Specific styling for multi-select dropdowns */
-.multi-select-dropdown::-webkit-scrollbar {
-  width: 6px;
-}
-
-.multi-select-dropdown::-webkit-scrollbar-track {
-  background: var(--base);
-  border-radius: 3px;
-}
-
-.multi-select-dropdown::-webkit-scrollbar-thumb {
-  background: var(--surface2);
-  border-radius: 3px;
-  border: 1px solid var(--base);
-}
-
-.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
-  background: var(--overlay0);
-}
-
-/* Specific styling for modal content */
-.modal-scrollable::-webkit-scrollbar {
-  width: 8px;
-}
-
-.modal-scrollable::-webkit-scrollbar-track {
-  background: var(--base);
-}
-
-.modal-scrollable::-webkit-scrollbar-thumb {
-  background: var(--surface1);
-  border-radius: 4px;
-}
-
-.modal-scrollable::-webkit-scrollbar-thumb:hover {
-  background: var(--surface2);
 }

internal/embedfs/web/css/output.css

@@ -2460,56 +2460,23 @@
   font-weight: 700;
   font-style: italic;
 }
-* {
+#page-viewport {
+  --scrollbar-thumb: var(--overlay0);
+  --scrollbar-track: var(--base);
+  scrollbar-width: normal;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+.multi-select-dropdown {
+  --scrollbar-thumb: var(--surface2);
+  --scrollbar-track: var(--base);
   scrollbar-width: thin;
-  scrollbar-color: var(--surface1) var(--mantle);
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
-::-webkit-scrollbar {
+.modal-scrollable {
-  width: 8px;
+  --scrollbar-thumb: var(--surface1);
-  height: 8px;
+  --scrollbar-track: var(--base);
-}
+  scrollbar-width: thin;
-::-webkit-scrollbar-track {
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-  background: var(--mantle);
-  border-radius: 4px;
-}
-::-webkit-scrollbar-thumb {
-  background: var(--surface1);
-  border-radius: 4px;
-  border: 2px solid var(--mantle);
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--surface2);
-}
-::-webkit-scrollbar-thumb:active {
-  background: var(--overlay0);
-}
-.multi-select-dropdown::-webkit-scrollbar {
-  width: 6px;
-}
-.multi-select-dropdown::-webkit-scrollbar-track {
-  background: var(--base);
-  border-radius: 3px;
-}
-.multi-select-dropdown::-webkit-scrollbar-thumb {
-  background: var(--surface2);
-  border-radius: 3px;
-  border: 1px solid var(--base);
-}
-.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
-  background: var(--overlay0);
-}
-.modal-scrollable::-webkit-scrollbar {
-  width: 8px;
-}
-.modal-scrollable::-webkit-scrollbar-track {
-  background: var(--base);
-}
-.modal-scrollable::-webkit-scrollbar-thumb {
-  background: var(--surface1);
-  border-radius: 4px;
-}
-.modal-scrollable::-webkit-scrollbar-thumb:hover {
-  background: var(--surface2);
 }
 @property --tw-translate-x {
   syntax: "*";

internal/view/baseview/footer.templ

@@ -30,10 +30,10 @@ templ Footer() {
 
 templ backToTopButton() {
 	<div class="absolute end-4 top-4 sm:end-6 lg:end-8">
-		<a
+		<button
 			class="inline-block rounded-full bg-teal p-2 text-crust
-                shadow-sm transition hover:bg-teal/75"
+                shadow-sm transition hover:bg-teal/75 hover:cursor-pointer"
-			href="#main-content"
+			onclick="document.getElementById('page-viewport').scrollTo({ top: 0, behavior: 'smooth' })"
 		>
 			<span class="sr-only">Back to top</span>
 			<svg
@@ -50,7 +50,7 @@ templ backToTopButton() {
 					clip-rule="evenodd"
 				></path>
 			</svg>
-		</a>
+		</button>
 	</div>
 }
 

internal/view/baseview/layout.templ

@@ -29,7 +29,7 @@ templ Layout(title string) {
 			}
 		</head>
 		<body
-			class="bg-base dark text-text ubuntu-mono-regular overflow-x-hidden"
+			class="bg-base dark text-text ubuntu-mono-regular overflow-hidden h-screen"
 			hx-ext="ws"
 			ws-connect={ devInfo.WebsocketBase + "/ws/notifications" }
 		>
@@ -38,17 +38,21 @@ templ Layout(title string) {
 			@popup.ConfirmModal()
 			<div
 				id="main-content"
-				class="flex flex-col h-screen justify-between"
+				class="flex flex-col h-screen"
 			>
 				@Navbar()
 				if previewRole != nil {
 					@previewModeBanner(previewRole)
 				}
-				<div id="page-content" class="mb-auto md:px-5 md:pt-5">
+				<div id="page-viewport" class="flex-1 overflow-y-auto overflow-x-hidden">
+					<div id="page-content" class="min-h-full flex flex-col justify-between">
+						<div class="mb-auto md:px-5 md:pt-5">
 							{ children... }
 						</div>
 						@Footer()
 					</div>
+				</div>
+			</div>
 		</body>
 	</html>
 }