Improve assignment styles part of #561

webextension/css/popup.css

@@ -762,25 +762,34 @@ span ~ .panel-header-text {
 #edit-sites-assigned h3 {
   font-size: 14px;
   font-weight: normal;
-  padding-block-end: 5px;
+  padding-block-end: 6px;
+  padding-block-start: 6px;
   padding-inline-end: 16px;
   padding-inline-start: 16px;
 }
 
-#edit-sites-assigned table td {
+.assigned-sites-list > div {
   display: flex;
-  padding-inline-end: 16px;
-  padding-inline-start: 16px;
+  padding-block-end: 6px;
+  padding-block-start: 6px;
 }
 
-#edit-sites-assigned .delete-assignment {
+.assigned-sites-list > div > .icon {
+  margin-inline-end: 10px;
+}
+
+.assigned-sites-list > div > .delete-assignment {
   display: none;
 }
 
-#edit-sites-assigned tr:hover > td > .delete-assignment {
+.assigned-sites-list > div:hover > .delete-assignment {
   display: block;
 }
 
+.assigned-sites-list > div > .hostname {
+  flex: 1;
+}
+
 .radio-choice > .radio-container {
   align-items: center;
   block-size: 29px;

webextension/js/popup.js

@@ -783,7 +783,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     const assignmentKeys = Object.keys(assignments);
     assignmentPanel.hidden = !(assignmentKeys.length > 0);
     if (assignments) {
-      const tableElement = assignmentPanel.querySelector("table > tbody");
+      const tableElement = assignmentPanel.querySelector(".assigned-sites-list");
       /* Remove previous assignment list,
          after removing one we rerender the list */
       while (tableElement.firstChild) {
@@ -791,18 +791,19 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       }
       assignmentKeys.forEach((siteKey) => {
         const site = assignments[siteKey];
-        const trElement = document.createElement("tr");
+        const trElement = document.createElement("div");
         /* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load.
            This is pending a better solution for favicons from web extensions */
         const assumedUrl = `https://${site.hostname}`;
         trElement.innerHTML = escaped`
-        <td><img class="icon" src="${assumedUrl}/favicon.ico"></td>
-        <td title="${site.hostname}" class="truncate-text">${site.hostname}
-          <img
-            class="pop-button-image delete-assignment"
-            src="/img/container-delete.svg"
-          />
-        </td>`;
+        <img class="icon" src="${assumedUrl}/favicon.ico">
+        <div title="${site.hostname}" class="truncate-text hostname">
+          ${site.hostname}
+        </div>
+        <img
+          class="pop-button-image delete-assignment"
+          src="/img/container-delete.svg"
+        />`;
         const deleteButton = trElement.querySelector(".delete-assignment");
         Logic.addEnterHandler(deleteButton, () => {
           const userContextId = Logic.currentUserContextId();

webextension/popup.html

@@ -127,15 +127,9 @@
           </fieldset>
         </form>
         <div id="edit-sites-assigned" class="scrollable" hidden>
-          <table id="container-assignement-table" class="container-info-list">
-            <thead>
-              <th colspan="3">
-                <h3>Sites assigned to this container</h3>
-              </th>
-            </thead>
-            <tbody>
-            </tbody>
-          </table>
+          <h3>Sites assigned to this container</h3>
+          <div class="assigned-sites-list">
+          </div>
         </div>
       </div>
     </div>