refactor: simplify some markups and styles

app/layout.tsx

@@ -51,14 +51,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
       >
         <ThemeProvider attribute="class" defaultTheme="system" disableTransitionOnChange>
           <SearchTextProvider>
-            <div className="relative flex h-full flex-col">
-              <SiteHeader />
-              <div className="flex flex-1 overflow-y-hidden">
-                <Sidebar />
-                <main className="h-full flex-1 overflow-y-auto rounded-tl-md border bg-page p-12">
-                  {children}
-                </main>
-              </div>
+            <div className="grid h-full grid-cols-[18rem_1fr] grid-rows-[3.5rem_1fr]">
+              <SiteHeader className="col-span-full" />
+              <Sidebar />
+              <main className="overflow-y-auto rounded-tl-md border bg-page p-12">{children}</main>
             </div>
             <TailwindIndicator />
           </SearchTextProvider>

components/sidebar.tsx

@@ -7,12 +7,12 @@ import { ToolGroups } from "./sidebar/tool-groups";
 
 export function Sidebar() {
   return (
-    <nav className="flex w-72 flex-col">
+    <nav className="flex flex-col overflow-y-auto">
       <div className="mt-px px-4">
         <SearchBar />
       </div>
       <div className="flex-1 overflow-y-auto">
-        <div className="mb-2 mt-4 px-2">
+        <div className="mt-2 p-2">
           <AllTools />
         </div>
         <Separator />
@@ -21,7 +21,7 @@ export function Sidebar() {
         </div>
       </div>
       <Separator />
-      <div className="justify-end p-2">
+      <div className="p-2">
         <Settings />
       </div>
     </nav>

components/sidebar/tool-link.tsx

@@ -26,9 +26,9 @@ function RawToolLink({ Icon, shortTitle: title, href, onClick, className, highli
       <span className={cn("invisible flex items-center", highlight !== "none" && "visible")}>
         <Indicator />
       </span>
-      <span className="flex select-none items-center">
+      <span className="flex select-none items-center gap-4">
         <Icon size={16} />
-        <span className="ml-4">{title}</span>
+        <span>{title}</span>
       </span>
     </Link>
   );

components/site-header.tsx

@@ -1,13 +1,18 @@
 import Link from "next/link";
 
 import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/style";
 import { icons } from "@/components/icons";
 import { ThemeToggle } from "@/components/theme-toggle";
 
-export function SiteHeader() {
+type Props = {
+  className?: string;
+};
+
+export function SiteHeader({ className }: Props) {
   return (
-    <header className="flex h-14 items-center justify-between px-4">
-      <div className="flex items-baseline space-x-2.5">
+    <header className={cn("flex items-center justify-between px-4", className)}>
+      <div className="flex items-baseline gap-x-2.5">
         <Link className="text-lg" href="/">
           {siteConfig.name}
         </Link>
@@ -23,17 +28,15 @@ export function SiteHeader() {
           </a>
         </small>
       </div>
-      <div className="flex items-center space-x-1">
+      <div className="flex gap-x-1">
         <a
-          className="group rounded-md p-2"
+          className="group h-10 w-10 rounded-md p-2"
           href={siteConfig.links.github}
           target="_blank"
           rel="noreferrer"
         >
-          <div>
-            <icons.GitHub className="h-6 w-6 group-hover:opacity-70" />
-            <span className="sr-only">GitHub</span>
-          </div>
+          <icons.GitHub className="group-hover:opacity-70" />
+          <span className="sr-only">GitHub</span>
         </a>
         <ThemeToggle />
       </div>