larger clickable zone for help icons

Former-commit-id: 7a6f9d161de5e592d5490f33ac0650e27505a6ff

extension/ui/bg/ui-options.js

@@ -762,21 +762,23 @@
 		const items = doc.querySelectorAll("[data-options-label]");
 		items.forEach(itemElement => {
 			const optionLabel = document.getElementById(itemElement.dataset.optionsLabel);
+			const helpIconContainer = document.createElement("span");
 			const helpIcon = document.createElement("img");
-			helpIcon.className = "help-icon";
 			helpIcon.src = HELP_ICON_URL;
-			helpIcon.onclick = () => {
+			helpIconContainer.className = "help-icon";
+			helpIconContainer.onclick = () => {
 				helpContent.hidden = !helpContent.hidden;
 				return false;
 			};
 			helpIcon.tabIndex = 0;
-			helpIcon.onkeyup = event => {
+			helpIconContainer.onkeyup = event => {
 				if (event.code == "Enter") {
 					helpContent.hidden = !helpContent.hidden;
 					return false;
 				}
 			};
-			optionLabel.appendChild(helpIcon);
+			helpIconContainer.appendChild(helpIcon);
+			optionLabel.appendChild(helpIconContainer);
 			const helpContent = document.createElement("div");
 			helpContent.hidden = true;
 			helpContent.className = "help-content";

extension/ui/pages/options.css

@@ -98,9 +98,13 @@ h3 a {
     max-width: calc(100% - 115px);
 }
 
-
 .help-icon {
     vertical-align: middle;
+    display: inline-block;
+    margin-left: 3px;
+}
+
+.help-icon>img {
     border-radius: 50%;
     border: 1px black solid;
     opacity: .2;
@@ -114,7 +118,7 @@ h3 a {
     cursor: pointer;
 }
 
-.help-icon:hover {
+.help-icon>img:hover {
     opacity: .4;
 }
 
@@ -554,12 +558,12 @@ html.maximized {
         filter: invert(50%);
     }
 
-    .help-icon {
+    .help-icon>img {
         opacity: .6;
         border-color: #ccc;
     }
 
-    .help-icon:hover {
+    .help-icon>img:hover {
         opacity: .8;
     }