cleanup

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", minWidth: "125px", padding: 0 }}>
+    return <div style={{ maxWidth: "225px", padding: 0 }}>
         {clearButton}
         <div className="d-flex flex-row justify-content-around mb-3">
             <ButtonSelect
@@ -108,7 +108,7 @@ function NPPronounPicker({ onChange, pronoun, asObject, clearButton }: {
             />
             <button className="btn btn-sm btn-outline" onClick={handleDisplayChange}>{display === "persons" ? "#" : display === "p" ? "PS" : "EN"}</button>
         </div>
-        <table className="table table-bordered table-sm" style={{ textAlign: "center", minWidth: "125px", tableLayout: "fixed" }}>
+        <table className="table table-bordered table-sm" style={{ textAlign: "center", minWidth: "100px", tableLayout: "fixed" }}>
             <tbody>
                 {pSpec.map((rw, i) => (
                     <tr>
@@ -117,7 +117,10 @@ function NPPronounPicker({ onChange, pronoun, asObject, clearButton }: {
                             return <td
                                 onClick={() => handleClick(i, j)}
                                 className={classNames({ "table-active": active })}
-                                style={active ? { backgroundColor: gColors[p.gender] } : {}}
+                                style={{
+                                    backgroundColor: active ? gColors[p.gender] : "inherit",
+                                    padding: "0.25rem 0",
+                                }}
                             >
                                 <div className="my-1">
                                     {typeof r === "string" ? r : r[p.gender]}

src/components/phrase-builder/PhraseBuilder.tsx

@@ -56,7 +56,7 @@ export function PhraseBuilder() {
             <div>{` `}</div>
         </div>}
         <div className="d-flex flex-row justify-content-around flex-wrap">
-            <div className="mb-2">
+            <div className="my-2">
                 <div className="h4">Subject {showRole(VPRendered, "subject")}</div>
                 <NPPicker
                     np={subject}
@@ -64,7 +64,7 @@ export function PhraseBuilder() {
                     onChange={handleSubjectChange}
                 />
             </div>
-            {verb && (verb.object !== "none") && <div className="mb-2">
+            {verb && (verb.object !== "none") && <div className="my-2">
                 <div className="h4">Object {showRole(VPRendered, "object")}</div>
                 <ObjectDisplay
                     object={verb.object}
@@ -72,7 +72,7 @@ export function PhraseBuilder() {
                     onChange={handleObjectChange}
                 />
             </div>}
-            <div className="mb-2">
+            <div className="my-2">
                 <div className="h4">Verb</div>
                 <VerbPicker verbs={verbs} verb={verb} onChange={setVerb} />
             </div>

src/content/practice-tools/phrase-builder.mdx

@@ -5,6 +5,4 @@ fullWidth: true
 
 import PhraseBuilder from "../../components/phrase-builder/PhraseBuilder";
 
-##### This is under construction... It works but will get better. 🤓
-
 <PhraseBuilder />