initial getting started and sending messages pages

packages/docs/app/components/header-layout.tsx

@@ -14,12 +14,12 @@ export function HeaderLayout({
       <header
         className={clsx(
           isScrolled ? "bg-slate-700/30" : "bg-slate-800",
-          "shadow-md sticky top-0 py-3 backdrop-blur-sm transition z-10",
+          "shadow-md sticky top-0 py-3 backdrop-blur-sm transition z-10 h-16 flex",
         )}
       >
-        <div className="m-auto max-w-screen-lg px-6">{header}</div>
+        <div className="m-auto w-full max-w-screen-lg px-6">{header}</div>
       </header>
-      <div className="m-auto max-w-screen-lg px-6 mt-6">{body}</div>
+      <div className="m-auto max-w-screen-lg px-6 mt-8">{body}</div>
     </div>
   )
 }

packages/docs/app/components/side-nav.tsx

@@ -8,8 +8,8 @@ export function SideNav({
   children: ReactNode
 }) {
   return (
-    <nav className="w-64 sticky top-0">
-      <h2 className="text-2xl mt-1">{heading}</h2>
+    <nav>
+      <h2 className="text-2xl">{heading}</h2>
       <div className="mt-3 flex flex-col gap-2 items-start">{children}</div>
     </nav>
   )

packages/docs/app/components/sidebar-layout.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from "react"
-import { useEffect, useRef, useState } from "react"
 
 export function SidebarLayout({
   sidebar,
@@ -8,19 +7,10 @@ export function SidebarLayout({
   sidebar: ReactNode
   body: ReactNode
 }) {
-  const [offsetTop, setOffsetTop] = useState(0)
-  const sidebarRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    setOffsetTop(sidebarRef.current?.offsetTop ?? 0)
-  }, [sidebarRef])
-
   return (
     <div className="flex items-start gap-6">
-      <div className="w-64 sticky" style={{ top: offsetTop }} ref={sidebarRef}>
-        {sidebar}
-      </div>
-      <div className="flex-1">{body}</div>
+      <div className="w-64 sticky top-24">{sidebar}</div>
+      <div className="flex-1 min-w-0">{body}</div>
     </div>
   )
 }