fix select option creating bug

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",

src/components/np-picker/NPNounPicker.tsx

@@ -103,6 +103,7 @@ function NPNounPicker(props: ({
                 handleChange={setPatternFilter}
             />
         </div>} */}
+        <h6>Noun</h6>
         {!(props.noun && props.noun.dynamicComplement) ? <div>
             <EntrySelect
                 value={props.noun?.entry}

src/components/np-picker/NPParticiplePicker.tsx

@@ -28,6 +28,7 @@ function NPParticiplePicker(props: ({
     }
     return <div style={{ maxWidth: "225px" }}>
         {props.clearButton}
+        <h6>Participle</h6>
         <EntrySelect
             value={props.participle?.verb}
             {..."getVerbByTs" in props ? {

src/components/np-picker/NPPronounPicker.tsx

@@ -105,7 +105,9 @@ function NPPronounPicker({ onChange, pronoun, asObject, clearButton, opts }: {
                 value={pronoun.distance}
                 handleChange={(g) => handlePronounTypeChange(g as "far" | "near")}
             />
-            <button className="btn btn-sm btn-outline" onClick={handleDisplayChange}>{display === "persons" ? "#" : display === "p" ? "PS" : "EN"}</button>
+            <button className="btn btn-sm btn-outline-secondary" onClick={handleDisplayChange}>
+                {display === "persons" ? "#" : display === "p" ? "PS" : "EN"}
+            </button>
         </div>
         <table className="table table-bordered table-sm" style={{ textAlign: "center", minWidth: "100px", tableLayout: "fixed" }}>
             <tbody>

src/components/np-picker/picker-tools.tsx

@@ -66,14 +66,26 @@ export function makeSelectOption(
     e: T.DictionaryEntry | T.VerbEntry | T.NounEntry | T.AdjectiveEntry | T.LocativeAdverbEntry,
     opts: T.TextOptions,    
 ): { value: string, label: string } {
+    function truncateEnglish(s: string) {
+        const maxLength = 16;
+        return s.length <= maxLength
+            ? maxLength
+            : s.slice(0, maxLength) + "…";
+    }
     const entry = "entry" in e ? e.entry : e;
-    const eng = (isVerbEntry(e)) 
-        ? (getEnglishParticiple(e.entry))
-        : getEnglishWord(e);
+    const eng = (() => {
+        try {
+            return (isVerbEntry(e)) 
+                ? (getEnglishParticiple(e.entry))
+                : getEnglishWord(e);
+        } catch(err) {
+            return "";
+        }
+    })();
     const english = typeof eng === "string"
         ? eng
         : !eng
-        ? ""
+        ? truncateEnglish(entry.e)
         : ("singular" in eng && eng.singular !== undefined)
         ? eng.singular
         : eng.plural;