From 9466bc5ff802604ead3d3b1c077ba1bec7ed6029 Mon Sep 17 00:00:00 2001
From: lingdocs <71590811+lingdocs@users.noreply.github.com>
Date: Fri, 22 Oct 2021 15:37:26 -0400
Subject: [PATCH] better formatting

---
 src/components/equative-explorer/EquativeExplorer.tsx  | 10 +++++++---
 .../equative-explorer/explorer-selectors.tsx           |  8 ++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/equative-explorer/EquativeExplorer.tsx b/src/components/equative-explorer/EquativeExplorer.tsx
index 5350bbe..bb58f3d 100644
--- a/src/components/equative-explorer/EquativeExplorer.tsx
+++ b/src/components/equative-explorer/EquativeExplorer.tsx
@@ -47,9 +47,13 @@ function EquativeExplorer() {
     }
     return <>
         <TenseSelector state={state} dispatch={dispatch} />
-        <div className="d-flex flex-row justify-content-between align-items-center mt-2">
-            <SubjectSelector state={state} dispatch={dispatch} />
-            <PredicateSelector state={state} dispatch={dispatch} />
+        <div className="row">
+            <div className="col">
+                <SubjectSelector state={state} dispatch={dispatch} />
+            </div>
+            <div className="col">
+                <PredicateSelector state={state} dispatch={dispatch} />
+            </div>
         </div>
         <EquativeDisplay state={state} dispatch={dispatch} />
     </>;
diff --git a/src/components/equative-explorer/explorer-selectors.tsx b/src/components/equative-explorer/explorer-selectors.tsx
index c64898c..b7e8744 100644
--- a/src/components/equative-explorer/explorer-selectors.tsx
+++ b/src/components/equative-explorer/explorer-selectors.tsx
@@ -41,8 +41,8 @@ export function SubjectSelector({ state, dispatch }: {
     const subject = state.subjectType === "pronouns"
         ? undefined
         : state.subjectsSelected[state.subjectType];
-    return <div className="form-group mr-2 flex-fill">
-        <label htmlFor="predicate-select"><h5>Subject:</h5></label>
+    return <div className="form-group">
+        <label htmlFor="predicate-select"><h5 className="mb-0">Subject:</h5></label>
         <div className="form-check">
             <input
                 className="form-check-input"
@@ -160,8 +160,8 @@ export function PredicateSelector({ state, dispatch }: {
         label: makeOptionLabel(e),
     }));
     const predicate = state.predicatesSelected[state.predicateType];
-    return <div className="form-group ml-2 flex-fill" style={{ maxWidth: "50%" }}>
-        <label htmlFor="predicate-select"><h5>Predicate:</h5></label>
+    return <div>
+        <label htmlFor="predicate-select"><h5 className="mb-0">Predicate:</h5></label>
         <div className="form-check">
             <input
                 className="form-check-input"