fixed dom nesting issue

src/ui/src/assets/css/_slide.scss

@@ -48,13 +48,16 @@
 		}
 	}
 
-	figure {
+	.figure {
+		display: block;
+
 		img {
 			max-width: 95%;
 			height: auto;
 		}
 
-		figcaption {
+		.figcaption {
+			display: block;
 			font-size: 1.8vw;
 			opacity: 0.6;
 			font-style: italic;

src/ui/src/components/SlideItem.js

@@ -29,12 +29,12 @@ const SlideItem = ({item}) => {
 				return <li className={item.task ? "task" : ""}>{prefix} <Children items={item.tokens} /></li>
 			case "image":
 				return (
-					<figure>
+					<span className="figure">
 						<img src={`slideimg://${basePath}/${item.href.replace(/\.\//, "")}`} alt={item.text} />
 						{item.text?.length > 0 ?
-							<figcaption>{item.text}</figcaption>
+							<span className="figcaption">{item.text}</span>
 						: null}
-					</figure>
+					</span>
 				)
 			case "blockquote":
 				return <blockquote><Children items={item.tokens} /></blockquote>