From d1a7c8ef391787af88aeac46067cec96ce5cb7b6 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 8 Feb 2016 09:59:04 +0000
Subject: [PATCH] =?UTF-8?q?Make=20=E2=80=98edit=20template=E2=80=99=20text?=
 =?UTF-8?q?boxes=20the=20same=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This involves:
- removing the hard coded width on any textbox that does placeholder
  highlighting
- adding JS to make sure that the extra layers on top of the textbox inherit
  the width of the textbox that the user types in (so the layers don’t get
  misaligned)

Keeping the textboxes at 2/3 width for consistency with how wide the messages
are on the ‘manage templates’ page.
---
 app/assets/javascripts/highlightTags.js        | 4 ++++
 app/assets/stylesheets/components/textbox.scss | 3 +--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js
index 472d479c7..f0f46fcd9 100644
--- a/app/assets/javascripts/highlightTags.js
+++ b/app/assets/javascripts/highlightTags.js
@@ -23,6 +23,10 @@
         .on("input", this.update)
         .on("scroll", this.maintainScrollParity);
 
+      this.$backgroundMaskForeground.width(
+        this.$textbox.width()
+      );
+
       this.$textbox
         .trigger("input");
 
diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss
index 224750586..a17aed6fd 100644
--- a/app/assets/stylesheets/components/textbox.scss
+++ b/app/assets/stylesheets/components/textbox.scss
@@ -18,11 +18,10 @@
     display: block;
     box-sizing: border-box;
     position: relative;
-    width: 500px;
-    height: 200px;
     margin: 0;
     padding: 4px;
     overflow: hidden;
+    height: 200px;
   }
 
   &-background,