diff --git a/src/css/popup.css b/src/css/popup.css index 6f9e64a..f2423a3 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -45,6 +45,7 @@ body { --small-text-size: 0.833rem; /* 10px */ --small-radius: 3px; --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */ + --column-panel-inline-size: 268px; --inactive-opacity: 0.3; } @@ -267,7 +268,7 @@ table { .column-panel-content { display: flex; flex-direction: column; - inline-size: 268px; + inline-size: var(--column-panel-inline-size); } .column-panel-content .panel-footer { @@ -659,7 +660,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: calc(var(--column-panel-inline-size) - 58px); } #container-info-hideorshow { @@ -676,6 +681,21 @@ span ~ .panel-header-text { opacity: 0.3; } +.container-close-tab { + transform: scale(0.7); + 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, .container-info-tab-row { align-items: center; @@ -702,10 +722,6 @@ span ~ .panel-header-text { margin-inline-end: 0; } -.container-info-tab-row td { - max-inline-size: 200px; -} - .container-info-list { display: flex; flex-direction: column; diff --git a/src/img/container-close-tab.svg b/src/img/container-close-tab.svg new file mode 100644 index 0000000..a36fa01 --- /dev/null +++ b/src/img/container-close-tab.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/js/popup.js b/src/js/popup.js index 9005ff3..7593bea 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -805,20 +805,44 @@ Logic.registerPanel(P_CONTAINER_INFO, { tr.classList.add("container-info-tab-row"); tr.innerHTML = escaped`