Merge branch 'main' into renovate/prettier-3.x

Author: kodiakhq[bot]

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

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()}>