better

src/components/VerbPickerBelow.tsx

@@ -122,7 +122,7 @@ function VerbPickerBelow({ onChange, verb }: {
     }
     const tOptions = (verb?.tenseCategory === "perfect") ? perfectTenseOptions : tenseOptions;
     return <div className="mb-4 mt-3">
-        <div style={{ maxWidth: "300px", margin: "0 auto" }}>
+        <div style={{ maxWidth: "300px", minWidth: "250px", margin: "0 auto" }}>
             <div className="d-flex flex-row justify-content-between align-items-center">
                 <div className="h5">Tense:</div>
                 {verb && <div className="mb-2">

src/components/phrase-builder/PhraseBuilder.tsx

@@ -12,7 +12,8 @@ import {
 const kingEmoji = "👑";
 const servantEmoji = "🙇‍♂️";
 
-// TODO: Ability to choose stative/dynamic compounds when both work
+// TODO: SHOW KING AND SERVANT ONCE TENSE PICKED, EVEN IF NPs not selected
+// TODO: Issue with "the money were taken"
 
 // TODO: error handling on error with rendering etc
 export function PhraseBuilder() {
@@ -82,12 +83,14 @@ export function PhraseBuilder() {
                         onChange={handleObjectChange}
                     />}
             </div>}
+            <div className="my-2">
+                <VerbPickerBelow
+                    verbs={verbs}
+                    verb={verb}
+                    onChange={setVerb}
+                />
+            </div>
         </div>
-        <VerbPickerBelow
-            verbs={verbs}
-            verb={verb}
-            onChange={setVerb}
-        />
         {verbPhrase && <div>
             <VPDisplay VP={verbPhrase} />
         </div>}