dynamically added close image icon in the title column

src/css/popup.css

@@ -653,7 +653,11 @@ span ~ .panel-header-text {
 
 /* Container info list */
 .container-info-tab-title {
-  flex: 1;
+  display: flex;
+}
+
+.container-info-tab-row:hover .container-info-tab-title .truncate-text {
+  inline-size: 184px;
 }
 
 #container-info-hideorshow {
@@ -671,16 +675,18 @@ span ~ .panel-header-text {
 }
 
 .container-close-tab {
-  inline-size: 50%;
+  transform: scale(0.7);
-  opacity: 0;
+  visibility: collapse;
 }
 
 .container-info-tab-row:hover .container-close-tab {
   opacity: 0.5;
+  visibility: visible;
 }
 
 .container-info-tab-row .container-close-tab:hover {
   opacity: 1;
+  visibility: visible;
 }
 
 .container-info-has-tabs,

src/img/container-close-tab.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 7 7">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
 	<polygon fill="#4c4c4c" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
 </svg>

src/js/popup.js

@@ -777,28 +777,42 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       tr.classList.add("container-info-tab-row");
       tr.innerHTML = escaped`
         <td></td>
-        <td class="container-info-tab-title truncate-text" title="${tab.url}" >${tab.title}</td>
+        <td class="container-info-tab-title truncate-text" title="${tab.url}" ><div class="container-tab-title">${tab.title}</div></td>`;
-        <td><img src="/img/container-close-tab.svg" id="${tab.id}" class="container-close-tab" /></td>`;
       tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
-
       document.getElementById("container-info-table").appendChild(fragment);
-
+      
-      const closeTab = document.getElementById(tab.id);
-      if(tab.hiddenState) {
-        closeTab.remove();
-      }
-
       // On click, we activate this tab. But only if this tab is active.
       if (!tab.hiddenState) {
+        const closeImage = document.createElement("img");
+        closeImage.src="/img/container-close-tab.svg";
+        closeImage.className = "container-close-tab";
+        closeImage.title="Close tab";
+        closeImage.id = tab.id;
+        tr.querySelector(".container-info-tab-title").appendChild(closeImage);
+
+        // On hover, we add truncate-text class to add close-tab-image after tab title truncates
+        tr.addEventListener("mouseover", () => {
+          tr.querySelector(".container-info-tab-title").classList.remove("truncate-text");
+          tr.querySelector(".container-tab-title").classList.add("truncate-text");
+        });
+        tr.addEventListener("mouseout", () => {
+          tr.querySelector(".container-info-tab-title").classList.add("truncate-text");
+          tr.querySelector(".container-tab-title").classList.remove("truncate-text");
+        });
+
         tr.classList.add("clickable");
         Logic.addEnterHandler(tr, async function () {
           await browser.tabs.update(tab.id, {active: true});
           window.close();
         });
-        Logic.addEnterHandler(closeTab, async function(e) {
+
-          await browser.tabs.remove(Number(e.target.id));
+        const closeTab = document.getElementById(tab.id);
-          window.close();
+        if (closeTab) {
-        });
+          Logic.addEnterHandler(closeTab, async function(e) {
+            await browser.tabs.remove(Number(e.target.id));
+            window.close();
+          });
+        }
       }
     } 
   },