1 files changed, 47 insertions, 8 deletions

diff --git a/ui.js b/ui.js
index 441db03..c86c8ad 100644
--- a/ui.js
+++ b/ui.js
@@ -1226,11 +1226,57 @@ class BasicGrouplikeItemElement extends Button {
     super()
 
     this.text = text
+    this.drawText = ''
   }
 
   fixLayout() {
     this.w = this.parent.contentW
     this.h = 1
+
+    this.computeText()
+  }
+
+  computeText() {
+    let text = ''
+    let done = false
+    let heckingWatchOut = false
+
+    const writable = {
+      write: characters => {
+        if (heckingWatchOut && done) {
+          return
+        }
+
+        for (const char of characters) {
+          if (heckingWatchOut) {
+            if (ansi.measureColumns(text + char) <= this.w - this.x) {
+              text += char
+            } else {
+              done = true
+              break
+            }
+          } else {
+            text += char
+          }
+        }
+      }
+    }
+
+    this.drawX = this.x
+    this.writeStatus(writable)
+
+    // This is the part where we want to be careful to not go over the width
+    // limit..
+    heckingWatchOut = true
+    writable.write(this.text)
+    this.drawX += ansi.measureColumns(this.text)
+    heckingWatchOut = false
+
+    writable.write(' '.repeat(Math.max(0, this.w - this.drawX)))
+
+    writable.write(ansi.resetAttributes())
+
+    this.drawText = text
   }
 
   drawTo(writable) {
@@ -1248,14 +1294,7 @@ class BasicGrouplikeItemElement extends Button {
     }
 
     writable.write(ansi.moveCursor(this.absTop, this.absLeft))
-
-    this.drawX = this.x
-    this.writeStatus(writable)
-    writable.write(this.text.slice(0, this.w - this.drawX))
-    this.drawX += ansi.measureColumns(this.text)
-    writable.write(' '.repeat(Math.max(0, this.w - this.drawX)))
-
-    writable.write(ansi.resetAttributes())
+    writable.write(this.drawText)
   }
 
   writeStatus(writable) {