From d3669ad6948b292a421cb518536e1ca5e91d61f3 Mon Sep 17 00:00:00 2001
From: adueck <adueck@users.noreply.github.com>
Date: Mon, 24 Oct 2022 16:19:21 +0500
Subject: [PATCH] caret squishing problem

---
 src/components/src/Hider.tsx         | 4 +++-
 src/demo-components/SpellingDemo.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/src/Hider.tsx b/src/components/src/Hider.tsx
index 98ffbf5..2d55410 100644
--- a/src/components/src/Hider.tsx
+++ b/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"}`} />
diff --git a/src/demo-components/SpellingDemo.tsx b/src/demo-components/SpellingDemo.tsx
index cca268a..5055189 100644
--- a/src/demo-components/SpellingDemo.tsx
+++ b/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>