Fix menu not shrinking to content properly

Before this commit, the width of the context menu depended on its own
previous width - so if you opened the menu of an album with a very long
name, then opened the menu of a shorter one, the width wouldn't actually
shrink to the shorter one's size as it's supposed to.

1 files changed, 20 insertions, 12 deletions

diff --git a/ui.js b/ui.js
index 7a9cd00..1457923 100644
--- a/ui.js
+++ b/ui.js
@@ -2445,21 +2445,15 @@ class ContextMenu extends FocusElement {
     // 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.
+    // Some elements resize to fill their parent (the menu)'s width. Since we
+    // want to know what their *minimum* width is, we'll immediately change the
+    // parent width that they see.
+    this.form.w = width
+
     for (const input of this.form.inputs) {
-      const inputWidth = ansi.measureColumns(input.text)
-      if (inputWidth < width) {
-        input.text += ' '.repeat(width - inputWidth)
-      }
       input.fixLayout()
+      width = Math.max(width, input.w)
     }
 
     let height = Math.min(10, this.form.inputs.length)
@@ -2474,6 +2468,20 @@ class ContextMenu extends FocusElement {
 
     this.pane.fillParent()
     this.form.fillParent()
+
+    // After everything else, do a second pass to apply the decided  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) {
+      input.fixLayout()
+      if (input.text) {
+        const inputWidth = ansi.measureColumns(input.text)
+        if (inputWidth < width) {
+          input.text += ' '.repeat(this.form.contentW - inputWidth)
+        }
+      }
+    }
   }
 
   selected() {