From 6caff42ec26d402e76c3c7481351cdd8b425b4d8 Mon Sep 17 00:00:00 2001
From: Richard Gibson <richard.gibson@gmail.com>
Date: Sun, 3 May 2026 14:51:45 -0400
Subject: [PATCH 1/2] DRY out the search result ::before styles

---
 css/elements.css                              | 38 ++++++-------------
 .../generated-reference/assets-inline.html    | 38 ++++++-------------
 2 files changed, 24 insertions(+), 52 deletions(-)

diff --git a/css/elements.css b/css/elements.css
index e4c6f844..934b79f0 100644
--- a/css/elements.css
+++ b/css/elements.css
@@ -1389,43 +1389,29 @@ a.menu-pane-header-production {
   overflow-y: auto;
 }
 
-li.menu-search-result-clause::before {
-  content: 'clause';
+#menu-search-results li::before {
+  display: none;
   width: 40px;
-  display: inline-block;
   text-align: right;
   padding-right: 1ex;
   color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
-li.menu-search-result-op::before {
-  content: 'op';
-  width: 40px;
+#menu-search-results li.menu-search-result-clause::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'clause';
 }
-
-li.menu-search-result-prod::before {
-  content: 'prod';
-  width: 40px;
+#menu-search-results li.menu-search-result-op::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'op';
 }
-
-li.menu-search-result-term::before {
-  content: 'term';
-  width: 40px;
+#menu-search-results li.menu-search-result-prod::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'prod';
+}
+#menu-search-results li.menu-search-result-term::before {
+  display: inline-block;
+  content: 'term';
 }
 
 #menu-search-results ul {
diff --git a/test/baselines/generated-reference/assets-inline.html b/test/baselines/generated-reference/assets-inline.html
index 333fb1a3..0a378bff 100644
--- a/test/baselines/generated-reference/assets-inline.html
+++ b/test/baselines/generated-reference/assets-inline.html
@@ -3069,43 +3069,29 @@
   overflow-y: auto;
 }
 
-li.menu-search-result-clause::before {
-  content: 'clause';
+#menu-search-results li::before {
+  display: none;
   width: 40px;
-  display: inline-block;
   text-align: right;
   padding-right: 1ex;
   color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
-li.menu-search-result-op::before {
-  content: 'op';
-  width: 40px;
+#menu-search-results li.menu-search-result-clause::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'clause';
 }
-
-li.menu-search-result-prod::before {
-  content: 'prod';
-  width: 40px;
+#menu-search-results li.menu-search-result-op::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'op';
 }
-
-li.menu-search-result-term::before {
-  content: 'term';
-  width: 40px;
+#menu-search-results li.menu-search-result-prod::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: 'prod';
+}
+#menu-search-results li.menu-search-result-term::before {
+  display: inline-block;
+  content: 'term';
 }
 
 #menu-search-results ul {

From 86ebbb719bae25644289ffcdd6f61d5792db0b4b Mon Sep 17 00:00:00 2001
From: Richard Gibson <richard.gibson@gmail.com>
Date: Sun, 3 May 2026 14:51:45 -0400
Subject: [PATCH 2/2] Further simplify search result ::before styles

---
 css/elements.css                              | 18 ++---------
 js/menu.js                                    | 12 ++++----
 .../generated-reference/assets-inline.html    | 30 ++++++-------------
 3 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/css/elements.css b/css/elements.css
index 934b79f0..ad4efdb9 100644
--- a/css/elements.css
+++ b/css/elements.css
@@ -1389,7 +1389,7 @@ a.menu-pane-header-production {
   overflow-y: auto;
 }
 
-#menu-search-results li::before {
+li.menu-search-result::before {
   display: none;
   width: 40px;
   text-align: right;
@@ -1397,21 +1397,9 @@ a.menu-pane-header-production {
   color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
-#menu-search-results li.menu-search-result-clause::before {
+li.menu-search-result[data-kind]::before {
   display: inline-block;
-  content: 'clause';
-}
-#menu-search-results li.menu-search-result-op::before {
-  display: inline-block;
-  content: 'op';
-}
-#menu-search-results li.menu-search-result-prod::before {
-  display: inline-block;
-  content: 'prod';
-}
-#menu-search-results li.menu-search-result-term::before {
-  display: inline-block;
-  content: 'term';
+  content: attr(data-kind);
 }
 
 #menu-search-results ul {
diff --git a/js/menu.js b/js/menu.js
index 348967cc..c315fb56 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -201,30 +201,30 @@ Search.prototype.displayResults = function (results) {
       let key = result.key;
       let entry = result.entry;
       let id = entry.id;
-      let cssClass = '';
+      let kind = '';
       let text = '';
 
       if (entry.type === 'clause') {
         let number = entry.number ? entry.number + ' ' : '';
         text = number + key;
-        cssClass = 'clause';
+        kind = 'clause';
         id = entry.id;
       } else if (entry.type === 'production') {
         text = key;
-        cssClass = 'prod';
+        kind = 'prod';
         id = entry.id;
       } else if (entry.type === 'op') {
         text = key;
-        cssClass = 'op';
+        kind = 'op';
         id = entry.id || entry.refId;
       } else if (entry.type === 'term') {
         text = key;
-        cssClass = 'term';
+        kind = 'term';
         id = entry.id || entry.refId;
       }
 
       if (text) {
-        html += `<li class=menu-search-result-${cssClass}><a href="${makeLinkToId(id)}">${text}</a></li>`;
+        html += `<li class="menu-search-result"${kind ? ` data-kind="${kind}"` : ''}><a href="${makeLinkToId(id)}">${text}</a></li>`;
       }
     });
 
diff --git a/test/baselines/generated-reference/assets-inline.html b/test/baselines/generated-reference/assets-inline.html
index 0a378bff..60f5aa03 100644
--- a/test/baselines/generated-reference/assets-inline.html
+++ b/test/baselines/generated-reference/assets-inline.html
@@ -285,30 +285,30 @@
       let key = result.key;
       let entry = result.entry;
       let id = entry.id;
-      let cssClass = '';
+      let kind = '';
       let text = '';
 
       if (entry.type === 'clause') {
         let number = entry.number ? entry.number + ' ' : '';
         text = number + key;
-        cssClass = 'clause';
+        kind = 'clause';
         id = entry.id;
       } else if (entry.type === 'production') {
         text = key;
-        cssClass = 'prod';
+        kind = 'prod';
         id = entry.id;
       } else if (entry.type === 'op') {
         text = key;
-        cssClass = 'op';
+        kind = 'op';
         id = entry.id || entry.refId;
       } else if (entry.type === 'term') {
         text = key;
-        cssClass = 'term';
+        kind = 'term';
         id = entry.id || entry.refId;
       }
 
       if (text) {
-        html += `<li class=menu-search-result-${cssClass}><a href="${makeLinkToId(id)}">${text}</a></li>`;
+        html += `<li class="menu-search-result"${kind ? ` data-kind="${kind}"` : ''}><a href="${makeLinkToId(id)}">${text}</a></li>`;
       }
     });
 
@@ -3069,7 +3069,7 @@
   overflow-y: auto;
 }
 
-#menu-search-results li::before {
+li.menu-search-result::before {
   display: none;
   width: 40px;
   text-align: right;
@@ -3077,21 +3077,9 @@
   color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
-#menu-search-results li.menu-search-result-clause::before {
+li.menu-search-result[data-kind]::before {
   display: inline-block;
-  content: 'clause';
-}
-#menu-search-results li.menu-search-result-op::before {
-  display: inline-block;
-  content: 'op';
-}
-#menu-search-results li.menu-search-result-prod::before {
-  display: inline-block;
-  content: 'prod';
-}
-#menu-search-results li.menu-search-result-term::before {
-  display: inline-block;
-  content: 'term';
+  content: attr(data-kind);
 }
 
 #menu-search-results ul {