fix: Correct the alignment of narrow text in input fields. (#9327)

* fix: Correct the alignment of narrow text in input fields.

* chore: Clarify purpose of first argument to positionTextElement_().

Author: gonfunko

core/field.ts

@@ -849,8 +849,7 @@ export abstract class Field<T = any>
       totalHeight = Math.max(totalHeight, constants!.FIELD_BORDER_RECT_HEIGHT);
     }
 
-    this.size_.height = totalHeight;
-    this.size_.width = totalWidth;
+    this.size_ = new Size(totalWidth, totalHeight);
 
     this.positionTextElement_(xOffset, contentWidth);
     this.positionBorderRect_();

core/field_dropdown.ts

@@ -29,6 +29,7 @@ import * as aria from './utils/aria.js';
 import {Coordinate} from './utils/coordinate.js';
 import * as dom from './utils/dom.js';
 import * as parsing from './utils/parsing.js';
+import {Size} from './utils/size.js';
 import * as utilsString from './utils/string.js';
 import {Svg} from './utils/svg.js';
 
@@ -553,8 +554,7 @@ export class FieldDropdown extends Field<string> {
     } else {
       arrowWidth = dom.getTextWidth(this.arrow as SVGTSpanElement);
     }
-    this.size_.width = imageWidth + arrowWidth + xPadding * 2;
-    this.size_.height = height;
+    this.size_ = new Size(imageWidth + arrowWidth + xPadding * 2, height);
 
     let arrowX = 0;
     if (block.RTL) {
@@ -595,8 +595,7 @@ export class FieldDropdown extends Field<string> {
         height / 2 - this.getConstants()!.FIELD_DROPDOWN_SVG_ARROW_SIZE / 2,
       );
     }
-    this.size_.width = textWidth + arrowWidth + xPadding * 2;
-    this.size_.height = height;
+    this.size_ = new Size(textWidth + arrowWidth + xPadding * 2, height);
 
     this.positionTextElement_(xPadding, textWidth);
   }

core/field_input.ts

@@ -45,6 +45,11 @@ import type {WorkspaceSvg} from './workspace_svg.js';
  */
 type InputTypes = string | number;
 
+/**
+ * The minimum width of an input field.
+ */
+const MINIMUM_WIDTH = 14;
+
 /**
  * Abstract class for an editable input field.
  *
@@ -113,8 +118,8 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
    */
   protected override get size_() {
     const s = super.size_;
-    if (s.width < 14) {
-      s.width = 14;
+    if (s.width < MINIMUM_WIDTH) {
+      s.width = MINIMUM_WIDTH;
     }
 
     return s;
@@ -730,6 +735,23 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
     return true;
   }
 
+  /**
+   * Position a field's text element after a size change.  This handles both LTR
+   * and RTL positioning.
+   *
+   * @param xMargin x offset to use when positioning the text element.
+   * @param contentWidth The content width.
+   */
+  protected override positionTextElement_(
+    xMargin: number,
+    contentWidth: number,
+  ) {
+    const effectiveWidth = xMargin * 2 + contentWidth;
+    const delta =
+      effectiveWidth < MINIMUM_WIDTH ? (MINIMUM_WIDTH - effectiveWidth) / 2 : 0;
+    super.positionTextElement_(xMargin + delta, contentWidth);
+  }
+
   /**
    * Use the `getText_` developer hook to override the field's text
    * representation. When we're currently editing, return the current HTML value