Fix rendering of multiple index signatures

As reported at #2567 (comment)
TypeStrong · Jun 16, 2024 · 4bf73a0 · 4bf73a0
1 parent 13db5d4
commit 4bf73a0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/lib/output/themes/default/templates/reflection.tsx b/src/lib/output/themes/default/templates/reflection.tsx
@@ -67,7 +67,9 @@ export function reflectionTemplate(context: DefaultThemeRenderContext, props: Pa
                     {!!props.model.indexSignatures?.length && (
                         <section class={classNames({ "tsd-panel": true }, context.getReflectionClasses(props.model))}>
                             <h4 class="tsd-before-signature">{context.i18n.theme_indexable()}</h4>
-                            {props.model.indexSignatures.map((index) => renderIndexSignature(context, index))}
+                            <ul class="tsd-signatures">
+                                {props.model.indexSignatures.map((index) => renderIndexSignature(context, index))}
+                            </ul>
                         </section>
                     )}
                     {!props.model.signatures && context.memberSources(props.model)}
@@ -81,7 +83,7 @@ export function reflectionTemplate(context: DefaultThemeRenderContext, props: Pa
 
 function renderIndexSignature(context: DefaultThemeRenderContext, index: SignatureReflection) {
     return (
-        <>
+        <li class="tsd-index-signature">
             <div class="tsd-signature">
                 <span class="tsd-signature-symbol">[</span>
                 {index.parameters!.map((item) => (
@@ -95,6 +97,6 @@ function renderIndexSignature(context: DefaultThemeRenderContext, index: Signatu
             {context.commentSummary(index)}
             {context.commentTags(index)}
             {index.type instanceof ReflectionType && context.parameter(index.type.declaration)}
-        </>
+        </li>
     );
 }
diff --git a/static/style.css b/static/style.css
@@ -1048,6 +1048,12 @@ a.tsd-index-link {
     border-width: 1px 0;
     transition: background-color 0.1s;
 }
+.tsd-signatures .tsd-index-signature:not(:last-child) {
+    margin-bottom: 1em;
+}
+.tsd-signatures .tsd-index-signature .tsd-signature {
+    border-width: 1px;
+}
 .tsd-description .tsd-signatures .tsd-signature {
     border-width: 1px;
 }