ENH: Tweak equation editor spacing

Author: kasbah

packages/frontend/src/model/equation_cell_editor.module.css

@@ -94,16 +94,32 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    align-items: center;
     justify-content: center;
     gap: 1ex;
     min-width: 0;
+    min-height: 60px;
     box-sizing: border-box;
     /* Vertical room for morphism names above arrows; see arrow_styles.module.css. */
     --formal-judgment-font-size: 0.9em;
     line-height: 1.2;
 }
 
+/* Per-side alignment of the diagrammatic path so the two sides of the
+   equation hug the central `=` sign: LHS sits at the bottom of its row
+   (against the equals sign above? — actually the equals is between
+   them, so "hug" means LHS bottoms toward the equals, RHS tops toward
+   the equals). Applied to the inner `.path` since that is the flex
+   container holding the path items. */
+.lhs .path {
+    align-items: center;
+    align-content: center;
+}
+
+.rhs .path {
+    align-items: flex-start;
+    align-content: flex-start;
+}
+
 /* A single (arrow + cod object) segment, kept together as one wrappable unit
    so the arrow never lands on a different line than its codomain. */
 .segment {

packages/frontend/src/model/equation_cell_editor.tsx

@@ -196,6 +196,7 @@ export default function EquationCellEditor(props: EquationEditorProps) {
                     mor={props.equation.lhs}
                     setMor={setLhs}
                     isActive={props.isActive && activeInput() === "lhs"}
+                    side="lhs"
                     exitBackward={() => setActiveInput("name")}
                     exitForward={() => setActiveInput("rhs")}
                     exitUp={() => setActiveInput("name")}
@@ -216,6 +217,7 @@ export default function EquationCellEditor(props: EquationEditorProps) {
                     mor={props.equation.rhs}
                     setMor={setRhs}
                     isActive={props.isActive && activeInput() === "rhs"}
+                    side="rhs"
                     exitBackward={() => setActiveInput("lhs")}
                     exitForward={props.actions.activateBelow}
                     exitUp={() => setActiveInput("lhs")}
@@ -240,6 +242,10 @@ type PathPickerProps = {
     mor: Mor | null;
     setMor: (mor: Mor | null) => void;
     isActive: boolean;
+    /** Which side of the equation this picker represents. Drives the
+        per-side alignment of the diagrammatic display (LHS bottom-aligned,
+        RHS top-aligned) so the two sides hug the centre `=` sign. */
+    side: "lhs" | "rhs";
     exitBackward?: () => void;
     exitForward?: () => void;
     exitUp?: () => void;
@@ -334,7 +340,7 @@ function PathPicker(props: PathPickerProps) {
 
     return (
         <div
-            class={styles.pathPicker}
+            class={`${styles.pathPicker} ${props.side === "lhs" ? styles.lhs : styles.rhs}`}
             onMouseDown={(evt) => {
                 // Activate the picker when clicking anywhere inside the
                 // border, but only when not already in editing mode (so