From 42467dfc9cacd09650d102b0906b34acec6e3af0 Mon Sep 17 00:00:00 2001
From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 27 Jul 2026 20:17:17 +0330
Subject: [PATCH] Improve sidebar styling

---
 osmium/src/ui/layout/main-navigation.tsx  |  4 +--
 osmium/src/ui/layout/version-selector.tsx | 40 +++++++++++------------
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/osmium/src/ui/layout/main-navigation.tsx b/osmium/src/ui/layout/main-navigation.tsx
index b9426b143..c672b264f 100644
--- a/osmium/src/ui/layout/main-navigation.tsx
+++ b/osmium/src/ui/layout/main-navigation.tsx
@@ -118,7 +118,7 @@ export function MainNavigation(_props: MainNavigationProps) {
 	});
 
 	return (
-		<nav class="custom-scrollbar h-full overflow-y-auto pb-20 md:h-[calc(100vh-7rem)]">
+		<nav class="custom-scrollbar h-full scrollbar-gutter-stable overflow-y-auto pr-4 pb-20 md:h-[calc(100vh-7rem)]">
 			<VersionSelector />
 			<Tabs value={selectedTab()}>
 				<Tabs.List class="sticky top-0 z-10 grid w-full grid-cols-2 md:bg-slate-50 md:dark:bg-slate-900">
@@ -140,7 +140,7 @@ export function MainNavigation(_props: MainNavigationProps) {
 					>
 						Reference
 					</Tabs.Trigger>
-					<Tabs.Indicator class="absolute bottom-0 h-0.5 bg-blue-500 transition-all duration-250 dark:bg-blue-500" />
+					<Tabs.Indicator class="absolute bottom-0 h-0.5 bg-blue-500 transition-all duration-250" />
 				</Tabs.List>
 				<Tabs.Content value="learn" class="relative mt-5 w-full">
 					<Show
diff --git a/osmium/src/ui/layout/version-selector.tsx b/osmium/src/ui/layout/version-selector.tsx
index dd7d49844..d6757c8c3 100644
--- a/osmium/src/ui/layout/version-selector.tsx
+++ b/osmium/src/ui/layout/version-selector.tsx
@@ -38,28 +38,26 @@ export default function VersionSelector() {
 					sameWidth
 					placement="bottom-start"
 				>
-					<div class="mx-1">
-						<Popover.Trigger
-							class="flex h-10 w-full items-center justify-between rounded-lg text-left shadow-md ring-1 shadow-black/5 ring-black/90 ring-inset dark:ring-white/10"
-							aria-label="Change version"
-							disabled={options().length <= 1}
-						>
-							<span class="prose prose-slate flex items-center truncate pl-2 text-lg text-slate-700 dark:text-slate-300">
-								<Icon
-									class="mr-2 w-5 fill-slate-700 pl-1 dark:fill-slate-200"
-									path={tag}
-								/>
-								{getOptionLabel(current())}
-							</span>
+					<Popover.Trigger
+						class="flex h-10 w-full items-center justify-between rounded-lg text-left shadow-md ring-1 shadow-black/5 ring-black/90 ring-inset dark:ring-white/10"
+						aria-label="Change version"
+						disabled={options().length <= 1}
+					>
+						<span class="prose prose-slate flex items-center truncate pl-2 text-lg text-slate-700 dark:text-slate-300">
+							<Icon
+								class="mr-2 w-5 fill-slate-700 pl-1 dark:fill-slate-200"
+								path={tag}
+							/>
+							{getOptionLabel(current())}
+						</span>
 
-							<Show when={options().length > 1}>
-								<Icon
-									class="mr-2 w-6 fill-slate-700 pl-1 dark:fill-slate-200"
-									path={chevronUpDown}
-								/>
-							</Show>
-						</Popover.Trigger>
-					</div>
+						<Show when={options().length > 1}>
+							<Icon
+								class="mr-2 w-6 fill-slate-700 pl-1 dark:fill-slate-200"
+								path={chevronUpDown}
+							/>
+						</Show>
+					</Popover.Trigger>
 					<Popover.Portal>
 						<Popover.Content class="z-50 space-y-1 rounded-xl bg-white p-2 text-sm shadow-md ring-1 shadow-black/5 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
 							<For each={options()}>