Merge pull request #20 from dontcallmedom/css-flex

Improve display of multiline type for terms
dontcallmedom · Feb 13, 2024 · cdc1acd · cdc1acd
2 parents 085ffa1 + 195cac4
commit cdc1acd
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/_tools/generate-pages.js b/_tools/generate-pages.js
@@ -425,7 +425,7 @@ function composeDisplayName(displayTerm, type, _for, prefix, dfns, termId) {
   }
   const typeDesc = html` (<em>${typeInfo[amendedType]?.human ?? amendedType}${typeDescComp}</em>)`;
   try {
-    return html`<code class=prefix>${displayPrefix}</code><strong>${wrapWithCode(html`${wrap}${displayTerm}${wrap}`, isCode(displayTerm, type), typeInfo[type].area)}</strong>${suffix}${typeDesc} <a class='self-link' href='#${encodeURIComponent(displayTerm + '@@' + termId)}' aria-label="Permalink for ${displayPrefix}${displayTerm}${suffix}">§</a>`;
+    return html`<code class=prefix>${displayPrefix}</code><span><strong>${wrapWithCode(html`${wrap}${displayTerm}${wrap}`, isCode(displayTerm, type), typeInfo[type].area)}</strong>${suffix}${typeDesc} <a class='self-link' href='#${encodeURIComponent(displayTerm + '@@' + termId)}' aria-label="Permalink for ${displayPrefix}${displayTerm}${suffix}">§</a></span>`;
   } catch (e) {
     console.error(type);
     throw e;

diff --git a/style.css b/style.css
@@ -264,7 +264,7 @@ blockquote {
   margin-top: 3rem;
 }
 
-.prefix { text-align: right; display: inline-block; width: 12em; font-size:0.7em; overflow: hidden;  text-overflow: ellipsis; vertical-align: bottom;}
+.prefix { text-align: right; display: inline-block; min-width: 12em; max-width: 12em; font-size:0.7em; overflow: hidden;  text-overflow: ellipsis;}
 
 
 dd {
@@ -273,7 +273,8 @@ dd {
 }
 
 dt {
-
+  display: flex;
+  align-items: baseline;  
   margin-top: 1rem;
 }