oops

src/components/VerbPicker.tsx

@@ -181,6 +181,7 @@ function VerbPicker({ onChange, subject, changeSubject, verb, verbs }: {
             value={verb?.verb}
             onChange={onVerbSelect}
             name="Verb"
+            isVerbSelect
         />
         {/* <Select
             value={verb && verb.verb.entry.ts.toString()}

src/components/np-picker/NPPicker.tsx

@@ -43,17 +43,22 @@ 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="text-center mt-3">
+        {!npType && <div className="d-flex flex-row align-items-center text-center mt-3">
-            {npTypes.map((npt) => <div className="mb-2">
+            <div className="h4 mr-3">
-                <button
+                NP
-                    key={npt}
+            </div>
-                    type="button"
+            <div className="ml-3">
-                    className="mr-2 btn btn-sm btn-outline-secondary"
+                {npTypes.map((npt) => <div className="mb-2">
-                    onClick={() => handleNPTypeChange(npt)}
+                    <button
-                >
+                        key={npt}
-                    {npt}
+                        type="button"
-                </button>
+                        className="mr-2 btn btn-sm btn-outline-secondary"
-            </div>)}
+                        onClick={() => handleNPTypeChange(npt)}
+                    >
+                        {npt}
+                    </button>
+                </div>)}
+            </div>
         </div>}
         {(npType === "pronoun" && np?.type === "pronoun")
             ? <PronounPicker

src/components/phrase-builder/ObjectDisplay.tsx

@@ -1,21 +0,0 @@
-import NPPicker from "../np-picker/NPPicker";
-
-function ObjectDisplay({ object, onChange, counterPart }: {
-    object: Exclude<VerbObject, "none">,
-    onChange: (o: NPSelection | undefined) => void,
-    counterPart: NPSelection | undefined ,
-}) {
-    return <div>
-        {(typeof object === "number")
-            ? <div className="text-muted">Unspoken 3rd Pers. Masc. Plur.</div>
-            : <NPPicker
-                asObject
-                np={object}
-                counterPart={counterPart}
-                onChange={onChange}
-            />}
-    </div>;
-}
-
-export default ObjectDisplay;
-

src/components/phrase-builder/PhraseBuilder.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import NPPicker from "../np-picker/NPPicker";
 import VerbPicker from "../VerbPicker";
 import VPDisplay from "./VPDisplay";
-import ObjectDisplay from "./ObjectDisplay";
 import { verbs } from "../../words/words";
 import { renderVP } from "../../lib/phrase-building";
 import {
@@ -66,11 +65,14 @@ export function PhraseBuilder() {
             </div>
             {verb && (verb.object !== "none") && <div className="my-2">
                 <div className="h4">Object {showRole(VPRendered, "object")}</div>
-                <ObjectDisplay
+                {(typeof verb.object === "number")
-                    object={verb.object}
+                    ? <div className="text-muted">Unspoken 3rd Pers. Masc. Plur.</div>
-                    counterPart={subject}
+                    : <NPPicker
-                    onChange={handleObjectChange}
+                        asObject
-                />
+                        np={verb.object}
+                        counterPart={subject}
+                        onChange={handleObjectChange}
+                    />}
             </div>}
             <div className="my-2">
                 <div className="h4">Verb</div>