better

src/components/VerbPicker.tsx

@@ -55,7 +55,7 @@ function VerbPicker({ onChange, subject, changeSubject, verb, verbs }: {
     }
     return <div className="mb-3">
         <div style={{ maxWidth: "300px", margin: "0 auto" }}>
-            <div>Verb:</div>
+            <div className="h5">Verb:</div>
             <EntrySelect
                 entries={verbs}
                 value={verb?.verb}

src/components/np-picker/NPPicker.tsx

@@ -43,11 +43,10 @@ function NPPicker({ np, onChange, counterPart, asObject }: {
     const isDynamicComplement = np && np.type === "noun" && np.dynamicComplement;
     const clearButton = <button className="btn btn-sm btn-light mb-2" onClick={handleClear}>X</button>;
     return <div>
-        {!npType && <div className="d-flex flex-row align-items-center text-center mt-3">
-            <div className="h6 mr-3">
+        {!npType && <div className="text-center mt-3">
+            {/* <div className="h6 mr-3">
                 Choose NP
-            </div>
-            <div className="ml-3">
+            </div> */}
             {npTypes.map((npt) => <div className="mb-2">
                 <button
                     key={npt}
@@ -58,7 +57,6 @@ function NPPicker({ np, onChange, counterPart, asObject }: {
                     {npt}
                 </button>
             </div>)}
-            </div>
         </div>}
         {(npType === "pronoun" && np?.type === "pronoun")
             ? <PronounPicker

src/components/np-picker/NPPronounPicker.tsx

@@ -94,7 +94,7 @@ function NPPronounPicker({ onChange, pronoun, asObject, clearButton }: {
     }
     const prs = labels(!!asObject)[display];
     const pSpec = "near" in prs ? prs[pronoun.distance] : prs;
-    return <div style={{ maxWidth: "225px", padding: 0 }}>
+    return <div style={{ maxWidth: "145px", padding: 0 }}>
         {clearButton}
         <div className="d-flex flex-row justify-content-around mb-3">
             <ButtonSelect

src/components/phrase-builder/PhraseBuilder.tsx

@@ -14,6 +14,8 @@ const servantEmoji = "🙇‍♂️";
 
 // TODO: SHOW KING AND SERVANT ONCE TENSE PICKED, EVEN IF NPs not selected
 // TODO: Issue with "the money were taken"
+// TODO: Use the same component for PronounPicker and NPPronounPicker (sizing issue)
+// get the practice pronoun picker page into a typesafe file
 
 // TODO: error handling on error with rendering etc
 export function PhraseBuilder() {
@@ -57,15 +59,14 @@ export function PhraseBuilder() {
             onChange={setVerb}
         />
         {(verb && (typeof verb.object === "object") && (verb.isCompound !== "dynamic")) &&
-            <div className="d-flex flex-row justify-content-around flex-wrap mt-4">
+            <div className="text-center mt-4">
                 <button onClick={handleSubjObjSwap} className="btn btn-sm btn-light">
                     <i className="fas fa-exchange-alt mr-2" /> subj/obj
                 </button>
-                {/* <div>{` `}</div> */}
             </div>}
-        <div className="d-flex flex-row justify-content-around flex-wrap">
+        <div className="d-flex flex-row justify-content-around flex-wrap" style={{ marginLeft: "-0.5rem", marginRight: "-0.5rem" }}>
             <div className="my-2">
-                <div className="h4">Subject {showRole(VPRendered, "subject")}</div>
+                <div className="h5 text-center">Subject {showRole(VPRendered, "subject")}</div>
                 <NPPicker
                     np={subject}
                     counterPart={verb ? verb.object : undefined}
@@ -73,7 +74,7 @@ export function PhraseBuilder() {
                 />
             </div>
             {verb && (verb.object !== "none") && <div className="my-2">
-                <div className="h4">Object {showRole(VPRendered, "object")}</div>
+                <div className="h5 text-center">Object {showRole(VPRendered, "object")}</div>
                 {(typeof verb.object === "number")
                     ? <div className="text-muted">Unspoken 3rd Pers. Masc. Plur.</div>
                     : <NPPicker

src/words/verb-categories/stative-trans.js

@@ -1,4 +1,7 @@
 module.exports = [
+    {
+        "ts": 1527819182,
+    },
     {
         "ts": 1527812403
     },