Tweak "Applicable Properties" appearance

Author: APickledWalrus

src/components/syntaxes/SyntaxBadge.astro

@@ -7,6 +7,7 @@ interface Props {
     entries: {
         text: string,
         cardRef?: string,
+        cardRefText?: string,
     }[],
     wrap?: boolean,
     description?: string,
@@ -17,15 +18,13 @@ const { badgeProps, entries, wrap, description }: Props = Astro.props;
 
 <span class="prefix-badge" title={description}>
     <Badge {...badgeProps} class="cb"/>
-    {entries.map(({ text, cardRef }, index) =>
+    {entries.map(({ text, cardRef, cardRefText }, index) =>
             <>
-                {wrap && <br>}
                 {cardRef ? (
-                    <p>
-                        <a href=`#${cardRef}`>
-                            {text}
-                        </a>
-                        {index != entries.length - 1 && ', '}
+                    <p data-wrap={wrap}>
+                        <a href=`#${cardRef}`>{text}</a>
+                        {cardRefText}
+                        {!wrap && index != entries.length - 1 && ', '}
                     </p>
                 ) : text}
             </>
@@ -36,9 +35,11 @@ const { badgeProps, entries, wrap, description }: Props = Astro.props;
     .prefix-badge:not(:last-of-type) {
         margin-bottom: 0.75em;
     }
-    p {
+    p:not([data-wrap="true"]) {
         display: inline-flex;
         align-items: center;
+    }
+    p {
         padding: 0;
         margin: 0;
 

src/components/syntaxes/cards/TypeCard.astro

@@ -20,7 +20,7 @@ const { type, currentVersion }: Props = Astro.props;
                         entries={type.properties
                             .sort(((a, b) => a.property.name.localeCompare(b.property.name)))
                             .map(property =>
-                                ({text: `${property.property.name} (${property.description})`, cardRef: property.property.id})
+                                ({text: property.property.name, cardRef: property.property.id, cardRefText: property.description})
                             )
                         }
                         wrap={true}