Expand width of ContextMenu items to all be equal

1 files changed, 14 insertions, 1 deletions

diff --git a/ui.js b/ui.js
index aef7fd8..c3962d5 100644
--- a/ui.js
+++ b/ui.js
@@ -1724,7 +1724,6 @@ class ContextMenu extends FocusElement {
     this.y = y
     this.visible = true
 
-    // TODO: Actions, that sorta thing
     for (const { label, action } of items.filter(Boolean)) {
       const button = new Button(label)
       if (action) {
@@ -1769,12 +1768,26 @@ class ContextMenu extends FocusElement {
   }
 
   fixLayout() {
+    // Do an initial pass to determine the width of this menu (or in particular
+    // the form), which is the greatest width of all the inputs.
     let width = 10
     for (const input of this.form.inputs) {
       input.fixLayout()
       width = Math.max(width, input.w)
     }
 
+    // Then do a second pass to apply this width to every element, so that they
+    // expand to all be the same width. In order to change the width of a
+    // button (which is what these elements are), we need to append space
+    // characters.
+    for (const input of this.form.inputs) {
+      const inputWidth = ansi.measureColumns(input.text)
+      if (inputWidth < width) {
+        input.text += ' '.repeat(width - inputWidth)
+      }
+      input.fixLayout()
+    }
+
     let height = Math.min(10, this.form.inputs.length)
 
     width += 3 // Space for the pane border and scrollbar