From 32bb73f661f0208ae1cbc701828f79089b3bfe83 Mon Sep 17 00:00:00 2001
From: Jonathan Kingston <jonathan@jooped.co.uk>
Date: Mon, 27 Feb 2017 20:36:19 +0000
Subject: [PATCH] Add overflow for container name to prevent UI from
 overflowing. Fixes #240

---
 data/usercontext.css       | 9 ++++++++-
 webextension/css/popup.css | 7 +++++++
 webextension/popup.html    | 2 +-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/data/usercontext.css b/data/usercontext.css
index 562a4ee..6c57db3 100644
--- a/data/usercontext.css
+++ b/data/usercontext.css
@@ -105,16 +105,23 @@ value, or chrome url path as an alternate selector mitiages this bug.*/
 #userContext-indicator {
   height: 16px;
   list-style-image: none !important;
+  vertical-align: middle;
   width: 16px;
 }
 
 #userContext-label {
-  margin-inline-end: 5px;
   color: var(--identity-tab-color) !important;
+  margin-inline-end: 5px;
+  max-inline-size: 75px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 #userContext-icons {
   -moz-box-align: center;
+  align-items: center;
+  display: flex;
+  max-inline-size: 120px;
 }
 
 .userContext-icon,
diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index 3b0498b..b35efda 100644
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@@ -416,6 +416,13 @@ span ~ .panel-header-text {
 }
 
 /* Container info list */
+#container-info-name {
+  margin-inline-end: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 #container-info-hideorshow {
   margin-block-start: 4px;
 }
diff --git a/webextension/popup.html b/webextension/popup.html
index e87f0e0..fafc66d 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -99,7 +99,7 @@
         <form id="edit-container-panel-form">
           <fieldset>
             <legend>Name</legend>
-            <input type="text" name="container-name" id="edit-container-panel-name-input"/>
+            <input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
           </fieldset>
           <fieldset id="edit-container-panel-choose-color">
             <legend>Choose a color</legend>