From 4ea309ff7d20e16f1e6ae28f754deaad66d7825a Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Wed, 21 Oct 2026 23:37:29 +0800
Subject: [PATCH] style: render homepage descriptions in the category pages'
 description row

The homepage printed each description inside its expanded row as .expand-desc, styled apart from the .desc-row that category pages use, so every spacing change to the table had to be tuned twice. The homepage now reveals the same .desc-row while a row is open, so its descriptions take the category pages' 15.2px size, and the .expand-desc markup and styles are gone.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/static/main.js       | 22 ++++++++++------------
 website/static/style.css     |  6 ------
 website/templates/index.html |  4 +---
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/website/static/main.js b/website/static/main.js
index f2660344..0ad5a46b 100644
--- a/website/static/main.js
+++ b/website/static/main.js
@@ -123,12 +123,18 @@ rows.forEach(function (row, i) {
   row._expandRow = next;
 });
 
+function setRowOpen(row, open) {
+  row.classList.toggle("open", open);
+  row.setAttribute("aria-expanded", String(open));
+  // The homepage shows a row's description only while the row is open
+  if (isIndexDocument && row._descRow) row._descRow.hidden = !open;
+}
+
 function collapseAll() {
   if (!tbody) return;
   const openRows = tbody.querySelectorAll("tr.row.open");
   openRows.forEach(function (row) {
-    row.classList.remove("open");
-    row.setAttribute("aria-expanded", "false");
+    setRowOpen(row, false);
   });
 }
 
@@ -312,14 +318,7 @@ if (tbody) {
     }
     if (!row) return;
 
-    const isOpen = row.classList.contains("open");
-    if (isOpen) {
-      row.classList.remove("open");
-      row.setAttribute("aria-expanded", "false");
-    } else {
-      row.classList.add("open");
-      row.setAttribute("aria-expanded", "true");
-    }
+    setRowOpen(row, !row.classList.contains("open"));
   });
 
   // Keyboard: Enter or Space on focused .row toggles expand
@@ -367,8 +366,7 @@ function openEntryRow(row) {
     searchInput.value = "";
     applyFilters();
   }
-  row.classList.add("open");
-  row.setAttribute("aria-expanded", "true");
+  setRowOpen(row, true);
 }
 
 // Group headings are hidden while sorted flat or filtered out by search, so a link to one must restore them first
diff --git a/website/static/style.css b/website/static/style.css
index 9cffcd8a..855cecfe 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -1151,10 +1151,6 @@ th[data-sort].sort-asc::after {
   display: table-row;
 }
 
-.desc-row:not([hidden]) + .expand-row .expand-desc {
-  display: none;
-}
-
 .table .expand-row td {
   padding-top: 0;
   background: var(--row-open);
@@ -1172,14 +1168,12 @@ th[data-sort].sort-asc::after {
   animation: expand-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.expand-desc a,
 .expand-also-see a,
 .expand-meta a,
 .footer a {
   color: var(--accent-deep);
 }
 
-.expand-desc a:hover,
 .expand-also-see a:hover,
 .expand-meta a:hover {
   color: var(--accent);
diff --git a/website/templates/index.html b/website/templates/index.html
index 3c4404af..693bbfb8 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -235,9 +235,7 @@
           <td></td>
           <td colspan="5">
             <div class="expand-content">
-              {% if entry.description %}
-              <div class="expand-desc">{{ entry.description | safe }}</div>
-              {% endif %} {% if entry.also_see %}
+              {% if entry.also_see %}
               <div class="expand-also-see">
                 Also see: {% for see in entry.also_see %}<a
                   href="{{ see.url }}"