touchup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "3.6.7",
+  "version": "3.6.8",
   "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/vp-explorer/AbbreviationFormSelector.tsx

@@ -1,6 +1,7 @@
 import ButtonSelect from "../ButtonSelect";
 import * as T from "../../types";
 import { roleIcon } from "./VPExplorerExplanationModal";
+import classNames from "classnames";
 
 const options = [
     {
@@ -86,7 +87,7 @@ function AbbreviationFormSelector({ form, onChange, adjustable, inline }: {
         }
     }
     // TODO: limit display of shrinking options based on the verb type
-    return <div className="mb-3 mx-3">
+    return <div className={classNames("mx-3", { "mb-3": !inline })}>
         {/* <div className="text-center text-small mb-2">Abbreviation Options</div> */}
         <ButtonSelect
             faded={inline}

src/components/vp-explorer/VPDisplay.tsx

@@ -45,7 +45,7 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
             form={rendered.form}
             onChange={setForm}
         />}
-        <div className="d-flex flex-row">
+        <div className="d-flex flex-row mb-2">
             <ModeSelect value={mode} onChange={setMode} />
             {mode === "blocks" && <ScriptSelect value={script} onChange={setScript} />}
             {mode === "text" && length && "long" in result.ps && onLengthChange && <LengthSelect value={length} onChange={onLengthChange} />}