better

src/components/VerbPickerBelow.tsx

@@ -122,25 +122,27 @@ function VerbPickerBelow({ onChange, verb }: {
     }
     const tOptions = (verb?.tenseCategory === "perfect") ? perfectTenseOptions : tenseOptions;
     return <div className="mb-4 mt-3">
-        {verb && <div className="col text-center mb-2">
-            <ButtonSelect
-                small
-                value={verb.tenseCategory}
-                options={[{
-                    label: "Basic",
-                    value: "basic",
-                }, {
-                    label: "Perfect",
-                    value: "perfect",
-                }, {
-                    label: "Modal",
-                    value: "modal",
-                }]}
-                handleChange={onTenseCategorySelect}
-            />
-        </div>}
         <div style={{ maxWidth: "300px", margin: "0 auto" }}>
-            <div>Tense:</div>
+            <div className="d-flex flex-row justify-content-between align-items-center">
+                <div className="h5">Tense:</div>
+                {verb && <div className="mb-2">
+                    <ButtonSelect
+                        small
+                        value={verb.tenseCategory}
+                        options={[{
+                            label: "Basic",
+                            value: "basic",
+                        }, {
+                            label: "Perfect",
+                            value: "perfect",
+                        }, {
+                            label: "Modal",
+                            value: "modal",
+                        }]}
+                        handleChange={onTenseCategorySelect}
+                    />
+                </div>}
+            </div>
             <Select
                 isSearchable={false}
                 // for some reason can't use tOptions with find here;

src/components/np-picker/NPPicker.tsx

@@ -44,8 +44,8 @@ function NPPicker({ np, onChange, counterPart, asObject }: {
     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="h4 mr-3">
+            <div className="h6 mr-3">
-                NP
+                Choose NP
             </div>
             <div className="ml-3">
                 {npTypes.map((npt) => <div className="mb-2">