fix(docs): fix sidebar-divider grid regression, footer-peel path/positioning, OG sizing, and prune stray comments

- #nd-docs-layout::before divider now spans the full grid explicitly
  (grid-row/grid-column: 1 / -1) instead of being auto-placed into a
  real content cell, which was pushing page content down
- footer-peel.jpg moved under /static/landing/ (was 404ing behind the
  i18n proxy's non-static path matcher) and wrapped in a relative div
  so next/image's fill positioning is valid under the sticky container
- OG route: corrected title font sizes and char-width ratio so long
  titles wrap to 2 lines instead of 3, and resized the corner arrow to
  match the reference cover template's proportions
- swapped the icon-only desktop navbar logo back to the wordmark
- removed stray non-TSDoc comments, folded into TSDoc where the
  explanation was worth keeping

Author: waleedlatif1

apps/docs/app/api/og/route.tsx

@@ -5,17 +5,15 @@ import type { NextRequest } from 'next/server'
 export const runtime = 'edge'
 
 const TITLE_FONT_SIZE = {
-  large: 88,
-  medium: 76,
-  small: 68,
+  large: 105,
+  medium: 91,
+  small: 81,
 } as const
 /** Average glyph width as a fraction of font size, for this weight/family — used to pack words into lines. */
-const AVG_CHAR_WIDTH_EM = 0.5
+const AVG_CHAR_WIDTH_EM = 0.46
 const TITLE_BOX_WIDTH = 1020
 const FONT_CACHE_REVALIDATE_SECONDS = 60 * 60 * 24 * 30
-// Measured directly off the reference cover template
-// (apps/sim/public/library/best-zapier-alternatives/cover.jpg): #c3c3c3
-// background, median ink #525252, ~26px margin on every edge.
+/** Measured off the reference cover template (`apps/sim/public/library/best-zapier-alternatives/cover.jpg`). */
 const INK_COLOR = '#525252'
 const OG_CONTAINER_STYLE = {
   height: '100%',
@@ -133,9 +131,9 @@ function SimWordmark() {
 /** Diagonal "open" arrow, top-right — matches the library/blog cover template. */
 function CornerArrow() {
   return (
-    <svg width='56' height='56' viewBox='0 0 24 24' fill='none'>
+    <svg width='58' height='58' viewBox='0 0 24 24' fill='none'>
       <path
-        d='M7 17 17 7M17 7H9M17 7V15'
+        d='M2 22 22 2M22 2H12M22 2V12'
         stroke={INK_COLOR}
         strokeWidth={3.6}
         strokeLinecap='round'

apps/docs/app/global.css

@@ -296,12 +296,20 @@ aside#nd-sidebar [data-radix-scroll-area-viewport] {
     min-height: var(--fd-docs-height) !important;
   }
 
-  /* Sidebar divider line — fixed to viewport, full height from navbar to bottom */
+  /* Sidebar divider line — sticky within the docs layout box, so it ends where
+     the layout does instead of bleeding into (or past) the footer below it.
+     #nd-docs-layout is a CSS grid (see fumadocs' Container slot); a sticky
+     pseudo-element stays in normal flow, so without an explicit grid-area it
+     gets auto-placed into a real content cell and skews that cell's sizing.
+     Spanning the full grid keeps it purely decorative/overlaid instead. */
   #nd-docs-layout::before {
     content: "";
-    position: fixed;
+    display: block;
+    position: sticky;
+    grid-row: 1 / -1;
+    grid-column: 1 / -1;
     top: 92px; /* below navbar */
-    bottom: 0;
+    height: calc(100dvh - 92px);
     left: calc(var(--sidebar-offset) + var(--fd-sidebar-width));
     width: 1px;
     background-color: var(--surface-active);

apps/docs/components/footer/footer-peel.tsx

@@ -21,13 +21,15 @@ export function FooterPeel() {
       className='-z-10 sticky bottom-0 h-[320px] w-full overflow-hidden max-sm:h-[200px]'
       aria-hidden='true'
     >
-      <Image
-        src='/images/footer-peel.jpg'
-        alt=''
-        fill
-        sizes='100vw'
-        className='object-cover object-[center_38%]'
-      />
+      <div className='relative h-full w-full'>
+        <Image
+          src='/static/landing/footer-peel.jpg'
+          alt=''
+          fill
+          sizes='100vw'
+          className='object-cover object-[center_38%]'
+        />
+      </div>
     </div>
   )
 }

apps/docs/components/footer/footer.tsx

@@ -130,7 +130,7 @@ function FooterColumn({ title, items }: { title: string; items: FooterItem[] })
 
 export function Footer() {
   return (
-    <div className='relative isolate mt-[120px] pb-[320px] max-sm:mt-16 max-sm:pb-[200px] max-lg:mt-[88px]'>
+    <div className='relative isolate z-30 mt-[120px] pb-[320px] max-sm:mt-16 max-sm:pb-[200px] max-lg:mt-[88px]'>
       <FooterPeel />
       <footer className='-mt-[320px] max-sm:-mt-[200px] relative z-30 w-full border-[var(--border)] border-t bg-[var(--bg)]'>
         <div className='mx-auto w-full max-w-[1460px] px-20 pt-16 pb-16 max-sm:px-5 max-lg:px-8 max-lg:pt-12 max-lg:pb-12'>

apps/docs/components/navbar/navbar.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { LanguageDropdown } from '@/components/ui/language-dropdown'
 import { SearchTrigger } from '@/components/ui/search-trigger'
-import { SimLogoIcon } from '@/components/ui/sim-logo'
+import { SimWordmark } from '@/components/ui/sim-logo'
 import { ThemeToggle } from '@/components/ui/theme-toggle'
 import { cn } from '@/lib/utils'
 
@@ -45,7 +45,7 @@ export function Navbar() {
           }}
         >
           <Link href='/' className='flex items-center'>
-            <SimLogoIcon className='size-[22px]' />
+            <SimWordmark className='h-[18px]' />
           </Link>
 
           <div className='-translate-x-1/2 absolute left-1/2 flex items-center justify-center'>

apps/docs/public/images/footer-peel.jpg …cs/public/static/landing/footer-peel.jpgapps/docs/public/images/footer-peel.jpg renamed to apps/docs/public/static/landing/footer-peel.jpg apps/docs/public/images/footer-peel.jpg renamed to apps/docs/public/static/landing/footer-peel.jpg

@@ -19,13 +19,15 @@ export function FooterPeel() {
       className='-z-10 sticky bottom-0 h-[320px] w-full overflow-hidden max-sm:h-[200px]'
       aria-hidden='true'
     >
-      <Image
-        src='/landing/footer-peel.jpg'
-        alt=''
-        fill
-        sizes='100vw'
-        className='object-cover object-[center_38%]'
-      />
+      <div className='relative h-full w-full'>
+        <Image
+          src='/landing/footer-peel.jpg'
+          alt=''
+          fill
+          sizes='100vw'
+          className='object-cover object-[center_38%]'
+        />
+      </div>
     </div>
   )
 }

apps/sim/app/(landing)/components/footer/components/footer-peel/footer-peel.tsx

@@ -16,6 +16,10 @@ import { MODEL_PROVIDERS_WITH_CATALOGS } from '@/app/(landing)/models/utils'
  * (edge-to-edge): the border lives on the full-width `<footer>` landmark while
  * an inner container caps and centers the content at the shared
  * `max-w-[1460px]` with the same `px-20` gutter as every section above.
+ *
+ * The wrapper's bottom padding matches {@link FooterPeel}'s own height and is
+ * the "reveal window" - the extra scroll room, past the footer's own opaque
+ * background, where the sticky-pinned peel image becomes visible.
  */
 
 const LINK_CLASS =
@@ -132,9 +136,6 @@ function FooterColumn({ title, items }: { title: string; items: FooterItem[] })
 
 export function Footer() {
   return (
-    // The bottom padding here (matching FooterPeel's own height, `footer-peel.tsx`)
-    // is the "reveal window": the extra scroll room, past the footer's own opaque
-    // background, where the sticky-pinned peel image becomes visible.
     <div className='relative isolate mt-[120px] pb-[320px] max-sm:mt-16 max-sm:pb-[200px] max-lg:mt-[88px]'>
       <FooterPeel />
       <footer className='-mt-[320px] max-sm:-mt-[200px] relative z-30 w-full border-[var(--border)] border-t bg-[var(--bg)]'>