small UI fixes in sidebar

Author: abrulic

app/components/sidebar/desktop-sidebar.tsx

@@ -5,7 +5,7 @@ import { SidebarContent } from "./sidebar-content"
 export const DesktopSidebarPanel = ({ sidebarTree, className }: { sidebarTree: SidebarTree; className: string }) => (
 	<div
 		className={cn(
-			"sticky top-[var(--header-height)] flex h-[calc(100vh-var(--header-height))] w-80 flex-col overflow-hidden bg-[var(--color-background)] p-4",
+			"sticky top-[var(--header-height)] flex h-[calc(100vh-var(--header-height))] w-72 flex-col overflow-hidden bg-[var(--color-background)] px-3 py-3",
 			className
 		)}
 	>

app/components/sidebar/mobile-sidebar.tsx

@@ -64,7 +64,7 @@ const MobileSidebarCloseButton = () => {
 		<button
 			type="button"
 			onClick={close}
-			className="absolute top-2 right-4 z-10 rounded-full p-2 text-[var(--color-text-normal)] transition-colors duration-200 hover:text-[var(--color-text-hover)]"
+			className="absolute top-2 right-3 z-10 rounded-full p-2 text-[var(--color-text-normal)] transition-colors duration-200 hover:text-[var(--color-text-hover)]"
 			aria-label="Close navigation menu"
 		>
 			<Icon name="X" className="size-5" />
@@ -83,7 +83,7 @@ export const MobileSidebarPanel = ({
 	return (
 		<div
 			className={cn(
-				"scrollbar fixed left-0 z-50 flex h-[calc(100vh-var(--header-height))] w-80 flex-col overflow-hidden bg-[var(--color-background)] p-4 transition-transform duration-500 ease-in-out",
+				"scrollbar fixed left-0 z-50 flex h-[calc(100vh-var(--header-height))] w-72 flex-col overflow-hidden bg-[var(--color-background)] px-3 py-3 transition-transform duration-500 ease-in-out",
 				isOpen ? "translate-x-0" : "-translate-x-full",
 				className
 			)}

app/components/sidebar/sidebar-items.tsx

@@ -5,8 +5,8 @@ import { useCurrentVersion } from "~/utils/version-resolvers"
 import type { SidebarSection } from "./sidebar"
 
 const getIndentClass = (depth: number) => {
-	const indentMap = { 0: "ml-0", 1: "ml-4", 2: "ml-8" }
-	return indentMap[depth as keyof typeof indentMap] || "ml-8"
+	const indentMap = { 0: "ml-4", 1: "ml-7", 2: "ml-10" }
+	return indentMap[depth as keyof typeof indentMap] || "ml-10"
 }
 
 type DocumentationNavLinkProps = {
@@ -24,7 +24,7 @@ export function DocumentationNavLink({ title, to, depth = 0, onClick }: Document
 			to={to}
 			onClick={onClick}
 			className={({ isActive, isPending }) =>
-				`block rounded-md px-3 py-2 text-sm md:text-base ${indentClass}
+				`block rounded-md px-3 py-1 text-sm md:text-base ${indentClass}
          ${isPending ? "text-[var(--color-text-hover)]" : ""}
          ${
 						isActive
@@ -46,7 +46,7 @@ interface SectionItemProps {
 
 const SectionTitle = ({ title }: { title: string }) => {
 	return (
-		<h3 className="mb-3 px-3 font-semibold text-[var(--color-text-active)] text-base tracking-wide md:text-lg">
+		<h3 className="mb-3 ml-4 px-3 font-semibold text-[var(--color-text-active)] text-sm uppercase tracking-wide md:text-base">
 			{title}
 		</h3>
 	)
@@ -85,7 +85,7 @@ export const SectionItem = ({ item, depth = 0, onItemClick }: SectionItemProps)
 		return (
 			<AccordionItem
 				title={item.title}
-				titleElement="h4"
+				titleElement="h5"
 				titleClassName=" font-semibold tracking-wide text-[var(--color-text-active)]"
 				content={content}
 				defaultOpen={true}

app/ui/alert.tsx

@@ -53,7 +53,13 @@ export const Alert = ({ children, title, variant, className = "" }: AlertProps)
 	const defaultTitle = variant === "info" ? t("titles.good_to_know") : t("titles.warning")
 
 	return (
-		<div className={cn("my-6 flex flex-col gap-2 rounded-xl border p-4 md:p-6", styles.container, className)}>
+		<div
+			className={cn(
+				"scrollbar scrollbar-thin my-6 flex flex-col gap-2 overflow-x-auto rounded-xl border p-4 md:p-6",
+				styles.container,
+				className
+			)}
+		>
 			<div className="inline-flex items-center gap-2">
 				<div className={cn("inline-flex", styles.icon)}>{getIcon()}</div>
 				<p className={cn("mt-0 mb-0 font-semibold text-sm leading-6 sm:text-base md:text-lg", styles.title)}>