Reworked Scroll into view (options page) and reformatted css

Author: Govi2020

content_scripts/link_hints.js

@@ -428,7 +428,7 @@ class LinkHintsMode {
     if (hasPopoverSupport) {
       this.containerEl.popover = "manual";
       this.containerEl.showPopover();
-      this.containerEl.classList.add("vimiumPopover");
+      this.containerEl.classList.add("vimium-popover");
     }
 
     this.setIndicator();

content_scripts/vimium.css

@@ -196,14 +196,14 @@ iframe.vimium-hud-frame {
   opacity: 0;
 }
 
-.vimiumPopover {
-  top: 0 !important;
-  left: 0 !important;
-  position: absolute !important;
-  display: block !important;
-  width: 100% !important;
-  height: 100% !important;
-  overflow: visible !important;
+div.vimium-popover {
+  top: 0;
+  left: 0;
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
 }
 
 body.vimium-find-mode ::selection {

pages/options.js

@@ -243,12 +243,34 @@ const OptionsPage = {
     return result;
   },
 
+  isElementInView(element) {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  },
+
   async saveOptions() {
+    // If no fields with validation errors are in view, scroll one of them into view
+    // so it's clear what the issue is.
+
     const hasErrors = this.showValidationErrors();
     if (hasErrors) {
-      const error = document.querySelector(".validation-error");
+      const errors = Array.from(document.querySelectorAll(".validation-error"));
 
-      error?.scrollIntoView();
+      let isAnyElementInView = errors.some((element) => this.isElementInView(element) == true);
+
+      if (isAnyElementInView) {
+        return;
+      }
+
+      errors[0]?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
 
       return;
     }