From 72c180aaf733003d58e46faa605145b2a4fddfc3 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Tue, 6 Oct 2026 22:23:50 +0200
Subject: [PATCH] website: plugins section spacing with margins, not flex gaps

PluginSection takes its header as a prop and puts the content 32px
below it with a margin. Sections on the index are 56px apart via
space-y. The browse page h1 sits 32px above the sort tabs, matching
the index headings.
---
 packages/website/src/plugins/browse-page.tsx  |  5 +-
 packages/website/src/plugins/section.tsx      | 11 ++-
 packages/website/src/routes/plugins/index.tsx | 91 ++++++++++++-------
 3 files changed, 66 insertions(+), 41 deletions(-)

diff --git a/packages/website/src/plugins/browse-page.tsx b/packages/website/src/plugins/browse-page.tsx
index 569eb44ab7..95a925db2b 100644
--- a/packages/website/src/plugins/browse-page.tsx
+++ b/packages/website/src/plugins/browse-page.tsx
@@ -60,7 +60,7 @@ export function BrowsePage({
           <CategoryNav plugins={matches} query={query} />
         </aside>
         <div className="min-w-0 flex-1">
-          <div className="mb-6 flex items-baseline justify-between gap-4">
+          <div className="mb-8 flex items-baseline justify-between gap-4">
             <h1 className="text-3xl font-medium tracking-tight">
               {query.q ? `Results for “${query.q}”${category ? ` in ${title}` : ""}` : title}
               <span className="ml-3 align-middle text-sm font-normal tabular-nums text-extra-muted-foreground">
@@ -73,8 +73,7 @@ export function BrowsePage({
               </a>
             )}
           </div>
-          <PluginSection>
-            <SortTabs query={query} />
+          <PluginSection header={<SortTabs query={query} />}>
             {results.length === 0 && query.q && (
               <div className="rounded-xl border border-white/10 bg-white/[0.03] px-4 py-10 text-center">
                 <p className="text-sm text-muted-foreground">No plugins match.</p>
diff --git a/packages/website/src/plugins/section.tsx b/packages/website/src/plugins/section.tsx
index 690a758fde..f873457a75 100644
--- a/packages/website/src/plugins/section.tsx
+++ b/packages/website/src/plugins/section.tsx
@@ -1,20 +1,23 @@
 import type { ReactNode } from "react";
 
-/** A block of a plugins page: its header, then its content one fixed gap below. */
+/** A block of a plugins page: its header, then its content 32px below. */
 export function PluginSection({
   id,
   labelledBy,
-  className = "",
+  className,
+  header,
   children,
 }: {
   id?: string;
   labelledBy?: string;
   className?: string;
+  header: ReactNode;
   children: ReactNode;
 }) {
   return (
-    <section id={id} aria-labelledby={labelledBy} className={`flex flex-col gap-8 ${className}`}>
-      {children}
+    <section id={id} aria-labelledby={labelledBy} className={className}>
+      {header}
+      <div className="mt-8">{children}</div>
     </section>
   );
 }
diff --git a/packages/website/src/routes/plugins/index.tsx b/packages/website/src/routes/plugins/index.tsx
index d686b98a4e..b694b2147a 100644
--- a/packages/website/src/routes/plugins/index.tsx
+++ b/packages/website/src/routes/plugins/index.tsx
@@ -128,19 +128,31 @@ function PluginsPage() {
         </div>
       </div>
 
-      <div className="mt-10 flex flex-col gap-14">
+      <div className="mt-10 space-y-14">
         {featured.length > 0 && (
-          <PluginSection labelledBy="featured">
-            <PluginSectionHeader>
-              <div>
-                <PluginSectionTitle id="featured">Featured</PluginSectionTitle>
-                <p className="mt-1 text-sm text-muted-foreground">A selection of hand picked plugins</p>
-              </div>
-              <a href={browseHref({ sort: "installs", window: DEFAULT_WINDOW })} className={SEE_ALL_CLASS}>
-                See all plugins
-                <ChevronRight className="h-3.5 w-3.5" />
-              </a>
-            </PluginSectionHeader>
+          <PluginSection
+            labelledBy="featured"
+            header={
+              <PluginSectionHeader>
+                <div>
+                  <PluginSectionTitle id="featured">Featured</PluginSectionTitle>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    A selection of hand picked plugins
+                  </p>
+                </div>
+                <a
+                  href={browseHref({
+                    sort: "installs",
+                    window: DEFAULT_WINDOW,
+                  })}
+                  className={SEE_ALL_CLASS}
+                >
+                  See all plugins
+                  <ChevronRight className="h-3.5 w-3.5" />
+                </a>
+              </PluginSectionHeader>
+            }
+          >
             <div className={CARD_ROW_CLASS}>
               {featured.map((plugin) => (
                 <NewPluginCard key={plugin.id} plugin={plugin} added={addedAgo(plugin, now)} />
@@ -149,14 +161,21 @@ function PluginsPage() {
           </PluginSection>
         )}
 
-        <PluginSection labelledBy="whats-new">
-          <PluginSectionHeader>
-            <PluginSectionTitle id="whats-new">What’s new</PluginSectionTitle>
-            <a href={browseHref({ sort: "new", window: DEFAULT_WINDOW })} className={SEE_ALL_CLASS}>
-              See all
-              <ChevronRight className="h-3.5 w-3.5" />
-            </a>
-          </PluginSectionHeader>
+        <PluginSection
+          labelledBy="whats-new"
+          header={
+            <PluginSectionHeader>
+              <PluginSectionTitle id="whats-new">What’s new</PluginSectionTitle>
+              <a
+                href={browseHref({ sort: "new", window: DEFAULT_WINDOW })}
+                className={SEE_ALL_CLASS}
+              >
+                See all
+                <ChevronRight className="h-3.5 w-3.5" />
+              </a>
+            </PluginSectionHeader>
+          }
+        >
           <div className={CARD_ROW_CLASS}>
             {newest.map((plugin) => (
               <NewPluginCard key={plugin.id} plugin={plugin} added={addedAgo(plugin, now)} />
@@ -164,8 +183,10 @@ function PluginsPage() {
           </div>
         </PluginSection>
 
-        <PluginSection labelledBy="categories">
-          <PluginSectionTitle id="categories">Categories</PluginSectionTitle>
+        <PluginSection
+          labelledBy="categories"
+          header={<PluginSectionTitle id="categories">Categories</PluginSectionTitle>}
+        >
           <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
             {CATEGORIES.map((category) => {
               const Icon = CATEGORY_ICONS[category.slug];
@@ -192,19 +213,21 @@ function PluginsPage() {
           id="most-installed"
           labelledBy="most-installed-title"
           className="scroll-mt-8"
+          header={
+            <PluginSectionHeader>
+              <PluginSectionTitle id="most-installed-title">
+                <a
+                  href={browseHref({ sort: "installs", window })}
+                  className="group inline-flex items-center gap-1"
+                >
+                  Most installed
+                  <ChevronRight className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
+                </a>
+              </PluginSectionTitle>
+              <WindowSwitch current={window} hrefs={windowHrefs} />
+            </PluginSectionHeader>
+          }
         >
-          <PluginSectionHeader>
-            <PluginSectionTitle id="most-installed-title">
-              <a
-                href={browseHref({ sort: "installs", window })}
-                className="group inline-flex items-center gap-1"
-              >
-                Most installed
-                <ChevronRight className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
-              </a>
-            </PluginSectionTitle>
-            <WindowSwitch current={window} hrefs={windowHrefs} />
-          </PluginSectionHeader>
           <div className="-mx-4 grid gap-x-8 md:grid-cols-2">
             {top.map((plugin, index) => (
               <PluginRankRow