From d901ba9067ba1788ae34e7d78c4fb20f2d26b989 Mon Sep 17 00:00:00 2001
From: Maxx Crawford <maxx.crawford@gmail.com>
Date: Wed, 27 May 2020 10:14:33 -0500
Subject: [PATCH] Fixed issue where items with too-long page titles wrapped in
 tab list of specific container inside the panel

---
 src/css/popup.css | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index 293a970..2e8ad20 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -107,12 +107,28 @@ table {
 
 /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
 .truncate-text {
+  position: relative;
   inline-size: 100%;
-  mask-image: linear-gradient(to left, transparent, black 1em);
   overflow: hidden;
   white-space: nowrap;
 }
 
+.truncate-text::after {
+  position: absolute;
+  mask-image: linear-gradient(to right, transparent, white 70%);
+  content: " ";
+  inline-size: 50px;
+  height: 100%;
+  inset-inline-end: 0;
+  background: white;
+}
+
+.hover-highlight:hover .truncate-text::after,
+.hover-highlight:focus .truncate-text::after {
+  mask-image: linear-gradient(to right, transparent, var(--highlight-blue) 50%);
+  background: var(--highlight-blue);
+}
+
 /* Color and icon helpers */
 [data-identity-color="blue"] {
   --identity-tab-color: #37adff;
@@ -674,6 +690,11 @@ h3.title {
   line-height: 24px;
 }
 
+.menu-item td {
+  display: flex;
+  max-inline-size: 300px;
+}
+
 .disabled-menu-item {
   color: grey;
   cursor: default;
@@ -687,12 +708,13 @@ h3.title {
 }
 
 .menu-text {
+  inline-size: calc(100% - 40px);
+  max-inline-size: 260px;
   line-height: 24px;
 }
 
 .menu-icon {
   display: block;
-  float: left;
   height: 16px;
   inline-size: 16px;
   margin-block-end: 4px;
@@ -703,8 +725,6 @@ h3.title {
 }
 
 .menu-right-float {
-  display: inline-block;
-  float: right;
   height: 24px;
   inline-size: 60px;
   text-align: right;