From afc05274a22e5a3a41eb75628b7ec6260d13c0f9 Mon Sep 17 00:00:00 2001
From: teknium1 <127238744+teknium1@users.noreply.github.com>
Date: Sun, 27 Sep 2026 03:08:03 -0700
Subject: [PATCH] website: keep the plugin name whole; tier/version pills move
 to the chip row, tools as one ellipsized list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With Community + version + stars pinned beside the title at 3 columns the name
collapsed to 'hermes-r…' — the one element a card must never lose. The title
now owns its row (stars stay right-aligned); tier and version pills lead the
chip row. The Tools row renders the first three names as one comma-separated
run that ellipsizes as a whole plus '+N', instead of three shrinking chips that
read 'mnemosyn… mnemosyn… mnemosyn…' for same-prefix tools.
---
 website/src/pages/plugins/index.tsx         | 36 +++++++++------------
 website/src/pages/plugins/styles.module.css | 15 ++++++---
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/website/src/pages/plugins/index.tsx b/website/src/pages/plugins/index.tsx
index 6af1c0bc43..cf8f3b60db 100644
--- a/website/src/pages/plugins/index.tsx
+++ b/website/src/pages/plugins/index.tsx
@@ -141,21 +141,6 @@ function PluginCard({
                 {highlightMatch(plugin.name, query)}
               </Link>
             </h3>
-            <span
-              className={styles.tierPill}
-              style={{
-                color: tier.color,
-                background: tier.bg,
-                borderColor: tier.border,
-              }}
-            >
-              {tier.icon} {tier.label}
-            </span>
-            {plugin.version && (
-              <span className={styles.versionPill} title={`Version ${plugin.version} at ${plugin.sha}`}>
-                v{plugin.version.replace(/^v/i, "")}
-              </span>
-            )}
             {typeof plugin.stars === "number" && (
               <a
                 className={styles.starPill}
@@ -176,6 +161,21 @@ function PluginCard({
         </p>
 
         <div className={styles.cardMeta}>
+          <span
+            className={styles.tierPill}
+            style={{
+              color: tier.color,
+              background: tier.bg,
+              borderColor: tier.border,
+            }}
+          >
+            {tier.icon} {tier.label}
+          </span>
+          {plugin.version && (
+            <span className={styles.versionPill} title={`Version ${plugin.version} at ${plugin.sha}`}>
+              v{plugin.version.replace(/^v/i, "")}
+            </span>
+          )}
           <button
             className={styles.categoryChip}
             onClick={(e) => {
@@ -295,11 +295,7 @@ function PluginCard({
               <span className={styles.metaLabel}>Tools</span>
               {toolChips.shown.length ? (
                 <span className={styles.chipList} title={caps.providesTools?.join(", ")}>
-                  {toolChips.shown.map((t) => (
-                    <code key={t} className={styles.envChip}>
-                      {t}
-                    </code>
-                  ))}
+                  <code className={styles.toolList}>{toolChips.shown.join(", ")}</code>
                   {toolChips.hidden > 0 && (
                     <code className={`${styles.envChip} ${styles.moreChip}`}>+{toolChips.hidden}</code>
                   )}
diff --git a/website/src/pages/plugins/styles.module.css b/website/src/pages/plugins/styles.module.css
index e18d5ff827..b5c0eb59b8 100644
--- a/website/src/pages/plugins/styles.module.css
+++ b/website/src/pages/plugins/styles.module.css
@@ -750,12 +750,15 @@
   flex: 1;
 }
 
-/* Tool chips squeeze (ellipsis each) before the row overflows, so the "+N" tail stays visible
-   even when three long tool names cannot fit side by side. */
-.chipList .envChip {
+/* Tool names as one comma-separated run that ellipsizes as a whole, so the "+N" tail stays
+   visible and same-prefix names never degrade into three identical stubs. */
+.toolList {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.66rem;
+  color: rgba(255, 215, 0, 0.6);
   white-space: nowrap;
   flex: 0 1 auto;
-  min-width: 4rem;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -1354,6 +1357,10 @@ a.pickBtn {
 }
 
 [data-theme="light"] .capChip,
+[data-theme="light"] .toolList {
+  color: var(--ifm-color-primary-darker);
+}
+
 [data-theme="light"] .envChip {
   border-color: rgba(110, 79, 0, 0.28);
   background: rgba(110, 79, 0, 0.06);