From 7eaff4688fcb39534945ec204f26e6af46b166b7 Mon Sep 17 00:00:00 2001
From: groovecoder <luke.crouch@gmail.com>
Date: Thu, 2 Feb 2017 13:47:37 -0600
Subject: [PATCH] fix #141: container-name class truncate long names

---
 webextension/css/popup.css | 7 +++++++
 webextension/js/popup.js   | 4 ++--
 webextension/popup.html    | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index 6f3bb06..6b3c88d 100644
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@@ -162,6 +162,13 @@ table.unstriped tbody tr {
   color: #0a0a0a;
 }
 
+.container-name {
+  max-inline-size: 7em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .edit-container-panel [type="radio"] {
   display: inline;
   margin-inline-start: -17px;
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 5d678eb..1414c05 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -234,7 +234,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             data-identity-color="${identity.color}">
           </div>
         </td>
-        <td class="open-newtab">${identity.name}</td>
+        <td class="open-newtab container-name">${identity.name}</td>
         <td class="show-tabs"><img src="/img/container-arrow.svg" class="show-tabs ${arrowClass}" /></td>`;
 
       tr.addEventListener("click", e => {
@@ -397,7 +397,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
             data-identity-color="${identity.color}">
           </div>
         </td>
-        <td>${identity.name}</td>
+        <td class="container-name">${identity.name}</td>
         <td class="edit-container">
           <img
             title="Edit ${identity.name} container"
diff --git a/webextension/popup.html b/webextension/popup.html
index 087fb99..313098a 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -68,7 +68,7 @@
       <div class="small-10 columns">
         <div class="row container-info-panel-header">
           <span class="usercontext-icon" id="container-info-icon"></span>
-          <h3 id="container-info-name" class="panel-header-text"></h3>
+          <h3 id="container-info-name" class="panel-header-text container-name"></h3>
         </div>
         <div class="row container-info-panel-hide container-info-has-tabs clickable" id="container-info-hideorshow">
           <img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/><span id="container-info-hideorshow-label">Hide this container</span><br/>
@@ -144,7 +144,7 @@
       <div class="small-12 columns">
         <div class="row container-info-panel-header">
           <span class="usercontext-icon" id="delete-container-icon"></span>
-          <h3 id="delete-container-name" class="panel-header-text"></h3>
+          <h3 id="delete-container-name" class="panel-header-text container-name"></h3>
         </div>
         <div class="row delete-container-confirm">
           <h4 class="delete-container-confirm-title">Remove This Container</h4>