Use measureColumns in the appropriate places

TL;DR If you want to take into account the width of text, use
measureColumns instead of just checking the length of the text!

4 files changed, 4 insertions, 4 deletions

diff --git a/ui/Label.js b/ui/Label.js
index faeee98..e320574 100644
--- a/ui/Label.js
+++ b/ui/Label.js
@@ -13,7 +13,7 @@ module.exports = class Label extends DisplayElement {
   }
 
   fixLayout() {
-    this.w = this.text.length
+    this.w = ansi.measureColumns(this.text)
   }
 
   drawTo(writable) {
diff --git a/ui/Pane.js b/ui/Pane.js
index 4e08c55..b33a1b7 100644
--- a/ui/Pane.js
+++ b/ui/Pane.js
@@ -86,7 +86,7 @@ module.exports = class Pane extends DisplayElement {
 
     const pane = new Pane()
     pane.frameColor = ansi.C_WHITE
-    pane.w = text.length + 2
+    pane.w = ansi.measureColumns(text) + 2
     pane.h = 3
     parent.addChild(pane)
 
diff --git a/ui/Sprite.js b/ui/Sprite.js
index 62b0172..701f1b8 100644
--- a/ui/Sprite.js
+++ b/ui/Sprite.js
@@ -60,7 +60,7 @@ module.exports = class Sprite extends DisplayElement {
   }
 
   get textureWidth() {
-    return Math.max(...this.texture.map(row => row.length))
+    return Math.max(...this.texture.map(row => ansi.measureColumns(row)))
   }
 
   get textureHeight() {
diff --git a/ui/form/Button.js b/ui/form/Button.js
index 1f1c537..3a35912 100644
--- a/ui/form/Button.js
+++ b/ui/form/Button.js
@@ -16,7 +16,7 @@ module.exports = class Button extends FocusElement {
   }
 
   fixLayout() {
-    this.w = this.text.length
+    this.w = ansi.measureColumns(this.text)
     this.h = 1
   }