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

This reverts commit 72c180aaf733003d58e46faa605145b2a4fddfc3.
---
 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, 41 insertions(+), 66 deletions(-)

diff --git a/packages/website/src/plugins/browse-page.tsx b/packages/website/src/plugins/browse-page.tsx
index 95a925db2b..569eb44ab7 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-8 flex items-baseline justify-between gap-4">
+          <div className="mb-6 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,7 +73,8 @@ export function BrowsePage({
               </a>
             )}
           </div>
-          <PluginSection header={<SortTabs query={query} />}>
+          <PluginSection>
+            <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 f873457a75..690a758fde 100644
--- a/packages/website/src/plugins/section.tsx
+++ b/packages/website/src/plugins/section.tsx
@@ -1,23 +1,20 @@
 import type { ReactNode } from "react";
 
-/** A block of a plugins page: its header, then its content 32px below. */
+/** A block of a plugins page: its header, then its content one fixed gap below. */
 export function PluginSection({
   id,
   labelledBy,
-  className,
-  header,
+  className = "",
   children,
 }: {
   id?: string;
   labelledBy?: string;
   className?: string;
-  header: ReactNode;
   children: ReactNode;
 }) {
   return (
-    <section id={id} aria-labelledby={labelledBy} className={className}>
-      {header}
-      <div className="mt-8">{children}</div>
+    <section id={id} aria-labelledby={labelledBy} className={`flex flex-col gap-8 ${className}`}>
+      {children}
     </section>
   );
 }
diff --git a/packages/website/src/routes/plugins/index.tsx b/packages/website/src/routes/plugins/index.tsx
index b694b2147a..d686b98a4e 100644
--- a/packages/website/src/routes/plugins/index.tsx
+++ b/packages/website/src/routes/plugins/index.tsx
@@ -128,31 +128,19 @@ function PluginsPage() {
         </div>
       </div>
 
-      <div className="mt-10 space-y-14">
+      <div className="mt-10 flex flex-col gap-14">
         {featured.length > 0 && (
-          <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>
-            }
-          >
+          <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>
             <div className={CARD_ROW_CLASS}>
               {featured.map((plugin) => (
                 <NewPluginCard key={plugin.id} plugin={plugin} added={addedAgo(plugin, now)} />
@@ -161,21 +149,14 @@ function PluginsPage() {
           </PluginSection>
         )}
 
-        <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>
-          }
-        >
+        <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>
           <div className={CARD_ROW_CLASS}>
             {newest.map((plugin) => (
               <NewPluginCard key={plugin.id} plugin={plugin} added={addedAgo(plugin, now)} />
@@ -183,10 +164,8 @@ function PluginsPage() {
           </div>
         </PluginSection>
 
-        <PluginSection
-          labelledBy="categories"
-          header={<PluginSectionTitle id="categories">Categories</PluginSectionTitle>}
-        >
+        <PluginSection labelledBy="categories">
+          <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];
@@ -213,21 +192,19 @@ 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