caret squishing problem

src/components/src/Hider.tsx

@@ -54,7 +54,9 @@ function Hider(props: {
                 ),
             },
             <div className="d-flex flex-row align-items-center">
-                {props.showing ? caretDown : caretRight}
+                <div style={{ width: "1rem" }}>
+                    {props.showing ? caretDown : caretRight}
+                </div>
                 {` `}
                 {props.aspect
                     ? <i className={`fas fa-${props.aspect === "imperfective" ? "video" : "camera"}`} />

src/demo-components/SpellingDemo.tsx

@@ -41,7 +41,7 @@ function SpellingDemo({ opts, onChange }: {
     opts: T.TextOptions,
     onChange: (opts: T.TextOptions) => void,
 }) {
-    return <div style={{ marginBottom: "100px" }}>
+    return <div className="mt-3" style={{ marginBottom: "100px" }}>
         <ul>
             <li>Converts text between Afghan and Pakistani spelling conventions</li>
             <li>Generates diacritics for Pashto script when given phonetic script along with Pashto script</li>