Changing current tab truncation to prevent container overflowing. Fixes

#552

webextension/css/popup.css

@@ -44,6 +44,13 @@ table {
   opacity: 0;
 }
 
+/* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
+.truncate-text {
+  mask-image: linear-gradient(to left, transparent, black 1em);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 /* Color and icon helpers */
 [data-identity-color="blue"] {
   --identity-tab-color: #37adff;
@@ -377,9 +384,9 @@ span ~ .panel-header-text {
 
 #current-tab {
   max-inline-size: 100%;
-  min-block-size: 94px;
-  padding-block-end: 16px;
-  padding-block-start: 16px;
+  min-block-size: 91px;
+  padding-block-end: 13px;
+  padding-block-start: 13px;
   padding-inline-end: 16px;
   padding-inline-start: 16px;
 }
@@ -388,16 +395,10 @@ span ~ .panel-header-text {
   color: #4a4a4a;
   font-size: var(--font-size-heading);
   font-weight: normal;
-  margin-block-end: 0;
+  margin-block-end: 3px;
   margin-block-start: 0;
 }
 
-#current-page {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 #current-page > img {
   block-size: 16px;
   inline-size: 16px;
@@ -407,29 +408,26 @@ span ~ .panel-header-text {
   align-items: center;
   display: flex;
   margin-inline-start: 17px;
+  white-space: nowrap;
 }
 
 #current-tab > label > input {
   display: inline;
 }
 
-#current-tab > label > img {
-  block-size: 12px;
-  display: inline-block;
-  inline-size: 12px;
-}
-
 #current-container {
-  display: contents;
+  flex: 1;
   text-transform: lowercase;
 }
 
-#current-container > .usercontext-icon {
+#current-tab > label > .usercontext-icon {
   background-size: 16px;
   block-size: 16px;
   display: block;
   flex: 0 0 20px;
   inline-size: 20px;
+  margin-inline-end: 3px;
+  margin-inline-start: 3px;
 }
 
 /* Rows used when iterating over panels */
@@ -444,12 +442,10 @@ span ~ .panel-header-text {
 }
 
 .container-panel-row .container-name {
+  flex: 1;
   max-inline-size: 160px;
-  overflow: hidden;
   padding-inline-end: 4px;
   padding-inline-start: 4px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .edit-containers-panel .userContext-wrapper {
@@ -531,9 +527,6 @@ 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 {
@@ -578,9 +571,6 @@ span ~ .panel-header-text {
 
 .container-info-tab-row td {
   max-inline-size: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .container-info-list {

webextension/js/popup.js

@@ -464,14 +464,11 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       imageElement.addEventListener("load", loadListener);
 
       const currentContainer = document.getElementById("current-container");
-      currentContainer.innerHTML = escaped`
-        <div
-           class="usercontext-icon"
-           data-identity-icon="${identity.icon}"
-           data-identity-color="${identity.color}">
-         </div>
-        ${identity.name}
-      `;
+      currentContainer.innerText = identity.name;
+
+      const currentContainerIcon = document.getElementById("current-container-icon");
+      currentContainerIcon.setAttribute("data-identity-icon", identity.icon);
+      currentContainerIcon.setAttribute("data-identity-color", identity.color);
     }
   },
 
@@ -500,7 +497,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             data-identity-color="${identity.color}">
           </div>
         </div>
-        <div class="container-name"></div>`;
+        <div class="container-name truncate-text"></div>`;
       context.querySelector(".container-name").textContent = identity.name;
       manage.innerHTML = "<img src='/img/container-arrow.svg' class='show-tabs pop-button-image-small' />";
 
@@ -649,7 +646,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       tr.classList.add("container-info-tab-row");
       tr.innerHTML = escaped`
         <td><img class="icon" src="${tab.favicon}" /></td>
-        <td class="container-info-tab-title">${tab.title}</td>`;
+        <td class="container-info-tab-title truncate-text">${tab.title}</td>`;
 
       // On click, we activate this tab. But only if this tab is active.
       if (tab.active) {
@@ -699,7 +696,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
               data-identity-color="${identity.color}">
             </div>
           </div>
-          <div class="container-name"></div>
+          <div class="container-name truncate-text"></div>
         </td>
         <td class="edit-container pop-button edit-container-icon">
           <img

webextension/popup.html

@@ -40,10 +40,12 @@ <h3 class="onboarding-title">Always open sites in the containers you want.</h3>
   <div class="panel container-panel hide" id="container-panel">
     <div id="current-tab">
       <h3>Current Tab</h3>
-      <div id="current-page"></div>
+      <div id="current-page" class="truncate-text"></div>
       <label for="container-page-assigned">
         <input type="checkbox" id="container-page-assigned" />
-        Always open in <span id="current-container"></span>
+        Always open in
+        <div id="current-container-icon" class="usercontext-icon"></div>
+        <span id="current-container" class="truncate-text"></span>
       </label>
     </div>
     <div class="panel-header">
@@ -74,7 +76,7 @@ <h3 class="panel-header-text">Containers</h3>
       <div class="column-panel-content">
         <div class="panel-header container-info-panel-header">
           <span class="usercontext-icon" id="container-info-icon"></span>
-          <h3 id="container-info-name" class="panel-header-text container-name"></h3>
+          <h3 id="container-info-name" class="panel-header-text container-name truncate-text"></h3>
         </div>
         <div class="select-row clickable container-info-panel-hide container-info-has-tabs" 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"/>