From 630246b21622708a6223f43bc6576fce917276fa Mon Sep 17 00:00:00 2001
From: "Amy J. Ko" <ajko@uw.edu>
Date: Mon, 22 Jul 2024 14:34:05 -0700
Subject: [PATCH] Format type variables better in docs.

---
 src/components/concepts/ConceptView.svelte | 18 +++++++++++-------
 src/components/lore/Speech.svelte          |  8 +++++++-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/concepts/ConceptView.svelte b/src/components/concepts/ConceptView.svelte
index dbe082105..d5f9cd5d5 100644
--- a/src/components/concepts/ConceptView.svelte
+++ b/src/components/concepts/ConceptView.svelte
@@ -11,6 +11,7 @@
     import type LocaleText from '../../locale/LocaleText';
     import Progress from '../../tutorial/Progress';
     import Link from '../app/Link.svelte';
+    import { TYPE_CLOSE_SYMBOL, TYPE_OPEN_SYMBOL } from '@parser/Symbols';
 
     export let concept: Concept;
     export let type: Type | undefined = undefined;
@@ -70,13 +71,16 @@
             {/if}
         </svelte:fragment>
         <svelte:fragment slot="aside"
-            >{#if variables}{#each variables.variables as variable, index}{#if index > 0},
-                    {/if}{@const name = variable.names.getPreferredName(
-                        $locales.getLocales(),
-                    )}{#if name}<RootView
-                            localized="symbolic"
-                            node={name.withoutLanguage()}
-                        />{/if}{/each}{/if}</svelte:fragment
+            >{#if variables}
+                <small
+                    >{TYPE_OPEN_SYMBOL}{#each variables.variables as variable, index}{#if index > 0},
+                        {/if}{@const name = variable.names.getPreferredName(
+                            $locales.getLocales(),
+                        )}{#if name}<RootView
+                                localized="symbolic"
+                                node={name.withoutLanguage()}
+                            />{/if}{/each}{TYPE_CLOSE_SYMBOL}</small
+                >{/if}</svelte:fragment
         >
     </Speech>
 
diff --git a/src/components/lore/Speech.svelte b/src/components/lore/Speech.svelte
index 89cf80d6c..5c75d10f7 100644
--- a/src/components/lore/Speech.svelte
+++ b/src/components/lore/Speech.svelte
@@ -54,7 +54,7 @@
     class:big
     class:scroll
 >
-    <div>
+    <div class="speaker">
         <div
             class="glyphs {symbols.length >= 3
                 ? 'small'
@@ -759,4 +759,10 @@
             transform: scale(0.75);
         }
     }
+
+    .speaker {
+        display: flex;
+        flex-direction: row;
+        gap: var(--wordplay-spacing);
+    }
 </style>