From db849c9f1a8a40fb381afc754d40e0af14f910de Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 21 Feb 2024 12:28:49 -0800
Subject: [PATCH] fix: hydration warnings on glossary

wrap definition in span, preventing errors when attempting to nest certain elements such as `ul`, which are currently contained in some definitions.
---
 src/components/Glossary/GlossaryDefinition/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Glossary/GlossaryDefinition/index.tsx b/src/components/Glossary/GlossaryDefinition/index.tsx
index 757a3cf76d6..9fca7d95d93 100644
--- a/src/components/Glossary/GlossaryDefinition/index.tsx
+++ b/src/components/Glossary/GlossaryDefinition/index.tsx
@@ -21,7 +21,13 @@ const GlossaryDefinition = ({ term, size = "md" }: GlossaryDefinitionProps) => {
       <OldHeading as="h3" lineHeight={1.4} id={term} {...headingStyles}>
         <Translation id={"glossary:" + term + "-term"} />
       </OldHeading>
-      <Text {...textStyles}>
+      {/**
+       * `as="span"` prevents hydration warnings for strings that contain
+       * elements that cannot be nested inside `p` tags, like `ul` tags
+       * (found in some Glossary definition).
+       * TODO: Develop a better solution to handle this case.
+       */}
+      <Text as="span" {...textStyles}>
         <Translation id={"glossary:" + term + "-definition"} />
       </Text>
     </Box>