Improve docs sidebar positioning and footer visibility logic

- Implement sticky sidebar behavior: follows scroll initially, then sticks under header
- Add JavaScript scroll detection to dynamically switch sidebar positioning
- Refactor footer to show only on public pages using data-driven allow-list approach
- Extract footer links into typed arrays for better maintainability
- Optimize footer visibility logic with clean filtering and DRY principles
- Improve profile table styling with consistent border radius and overflow handling

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

web/src/app/docs/layout.tsx

@@ -23,9 +23,9 @@ export default function DocsLayout({
   // Track scroll position to determine if sidebar should be fixed
   useEffect(() => {
     const handleScroll = () => {
-      // The header with logo is 4rem (64px) tall
+      // The header with logo is approximately 72px tall (p-4 = 16px top/bottom + content height)
       // Fix the sidebar when the user scrolls past the header
-      if (window.scrollY > 64) {
+      if (window.scrollY > 72) {
         setIsFixed(true)
       } else {
         setIsFixed(false)
@@ -79,7 +79,7 @@ export default function DocsLayout({
         <div className="hidden lg:block w-64 shrink-0">
           <div
             className={`w-64 z-40 transition-all duration-200 ease-in-out ${
-              isFixed ? 'fixed top-16 h-[calc(100vh-4rem)]' : 'relative'
+              isFixed ? 'fixed top-4 h-[calc(100vh-2rem)]' : 'relative'
             }`}
           >
             {/* Dynamic gradient fade indicators */}

web/src/app/profile/components/api-keys-section.tsx

@@ -173,7 +173,7 @@ export function ApiKeysSection() {
           </Button>
         </div>
       )}
-      <div className="rounded-md border">
+      <div className="border rounded-lg overflow-x-auto">
         <Table>
           <TableHeader>
             <TableRow>

web/src/app/profile/components/referrals-section.tsx

@@ -94,7 +94,7 @@ export function ReferralsSection() {
   }
 
   return (
-    <ProfileSection description="Share Codebuff with friends and earn credits together! Both you and your friend get rewarded when they sign up.">
+    <ProfileSection description="Share Codebuff!">
       {data?.referredBy && (
         <Card className="bg-gradient-to-br from-green-100/90 to-emerald-100/90 dark:from-green-900/90 dark:to-emerald-900/90 border border-green-200 dark:border-green-800 shadow-lg">
           <CardHeader>

web/src/app/profile/components/security-section.tsx

@@ -201,7 +201,7 @@ export function SecuritySection() {
         </TabsList>
 
         <TabsContent value="web" className="space-y-4">
-          <div className="rounded-md border">
+          <div className="border rounded-lg overflow-x-auto">
             <Table>
               <TableHeader>
                 <TableRow>
@@ -277,7 +277,7 @@ export function SecuritySection() {
         </TabsContent>
 
         <TabsContent value="cli" className="space-y-4">
-          <div className="rounded-md border">
+          <div className="border rounded-lg overflow-x-auto">
             <Table>
               <TableHeader>
                 <TableRow>

web/src/components/footer.tsx

@@ -32,6 +32,7 @@ const authLinks: LinkInfo[] = [{ text: 'Login', href: '/login' }]
 const publicPaths = [
   ...authLinks,
   ...legalLinks,
+  ...communityLinks,
   ...siteLinks.filter((link) => link.href !== '/docs'),
 ]
   .map((link) => link.href)