From 40c9adc400093936668bc9263f4f2143ca07300b Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Wed, 13 Dec 2023 09:41:12 -0800
Subject: [PATCH] Update annotation tags to avoid improperly nested HTML tags

---
 src/components/CanvasAnnotations.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
index ba5f5cb268..8b4993c3e2 100644
--- a/src/components/CanvasAnnotations.js
+++ b/src/components/CanvasAnnotations.js
@@ -95,14 +95,17 @@ export class CanvasAnnotations extends Component {
                 onMouseEnter={() => this.handleAnnotationHover(annotation)}
                 onMouseLeave={this.handleAnnotationBlur}
               >
-                <ListItemText primaryTypographyProps={{ variant: 'body2' }}>
-                  <SanitizedHtml ruleSet={htmlSanitizationRuleSet} htmlString={annotation.content} />
-                  <div>
-                    {annotation.tags.map((tag) => (
-                      <Chip size="small" variant="outlined" label={tag} id={tag} key={tag.toString()} />
-                    ))}
-                  </div>
-                </ListItemText>
+                <ListItemText
+                  primaryTypographyProps={{ variant: 'body2' }}
+                  primary={
+                    <SanitizedHtml ruleSet={htmlSanitizationRuleSet} htmlString={annotation.content} />
+                  }
+                  secondary={
+                    annotation.tags.map((tag) => (
+                      <Chip component="span" size="small" variant="outlined" label={tag} id={tag} key={tag.toString()} />
+                    ))
+                  }
+                />
               </MenuItem>
             </ScrollTo>
           ))}