Fix tab order on tracking domains setting page and remove float layout

src/js/htmlutils.js

@@ -213,9 +213,11 @@ let htmlUtils = {
     <span class="ui-icon ui-icon-alert tooltip breakage-warning" title="${breakage_warning_tooltip}"></span>
     <span class="origin-inner tooltip" title="${domain_tooltip}">${dnt_html}${shield_icon}${fqdn}</span>
   </div>
+  <div class="toggle-container">
+    ${htmlUtils.getToggleHtml(fqdn, action, blockedFpScripts)}
+    <a href="" class="honeybadgerPowered tooltip" title="${undo_arrow_tooltip}"></a>
+  </div>
   <a href="" class="removeOrigin">&#10006</a>
-  ${htmlUtils.getToggleHtml(fqdn, action, blockedFpScripts)}
-  <a href="" class="honeybadgerPowered tooltip" title="${undo_arrow_tooltip}"></a>
 </div>
       `.trim();
     };

src/js/options.js

@@ -646,7 +646,7 @@ function getOriginAction(domain) {
 function revertDomainControl(event) {
   event.preventDefault();
 
-  let domain = $(event.target).parent().data('origin');
+  let domain = $(event.target).closest('.clicker').data('origin');
 
   chrome.runtime.sendMessage({
     type: "revertDomainControl",

src/skin/options-layout.css

@@ -357,18 +357,6 @@ header {
     .origin {
         max-width: 340px;
     }
-
-    .switch-container {
-        margin-left: 350px;
-    }
-
-    .key {
-        left: 345px;
-    }
-
-    .honeybadgerPowered {
-        left: 470px;
-    }
 }
 
 @media (prefers-color-scheme: dark) {

src/skin/popup.css

@@ -81,7 +81,6 @@ button {
 .origin{
   max-width: 210px;
   color: #555555;
-  float: left;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -90,7 +89,6 @@ button {
 .switch-container {
     width: 115px;
     display: block;
-    margin-left: 220px;
 }
 .switch-toggle {
     background-color: #515050;
@@ -99,6 +97,7 @@ button {
 .switch-toggle > label {
     cursor: pointer;
 }
+.keyContainer .key,
 .options .switch-container {
     max-width: 114px;
 }
@@ -127,18 +126,15 @@ button {
     margin-right: 10px;
     width: 20px;
     height: 20px;
-    position: relative;
-    left: 340px;
-    bottom: 15px;
 }
 .userset .honeybadgerPowered {
     display: block;
     background: url('/icons/badger-pin.png') no-repeat;
 }
 
 a.removeOrigin {
-    float: right;
     margin-right: 10px;
+    margin-left: auto;
     width: 10px;
     text-decoration: none;
 }
@@ -227,6 +223,17 @@ button.cta-button:hover, a.cta-button:hover {
     background-color: #f58728;
 }
 
+.keyContainer,
+.clicker {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}
+
+.toggle-container {
+    display: flex;
+    gap: 10px;
+}
+
 .clickerContainer {
     max-height: 290px;
     overflow-y: auto;
@@ -239,17 +246,13 @@ button.cta-button:hover, a.cta-button:hover {
     position: relative;
 }
 .key {
-    position: relative;
-    height: 7px;
-    left: 215px;
-    right: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    justify-items: center;
     z-index: 30;
     background: #fefefe;
     padding-top: 4px;
-    width: 117px;
-}
-.key img {
-    margin-left: 19px;
+    grid-column: 2;
 }
 
 .flex-wrapper {
@@ -572,29 +575,17 @@ a.overlay-close:hover {
         max-width: 150px;
     }
 
+    .key,
     .switch-container {
         width: 100px;
-        display: block;
-        margin-left: 150px;
-    }
-
-    .key {
-        left: 150px;
-    }
-    .key img {
-        margin-left: 12px;
-    }
-
-    .honeybadgerPowered {
-        left: 255px;
     }
 
     #share {
         margin-left: 6px;
         margin-right: 8px;
     }
     #options {
-        margin-right: 0px;
+        margin-right: 0;
     }
 }