From f15a49b408e3d7d0407347dadf00a3915cd9f3cf Mon Sep 17 00:00:00 2001
From: Charalampos Kardaris <ckardaris@outlook.com>
Date: Sun, 29 Mar 2026 13:54:36 +0200
Subject: [PATCH] [fix] Simplify HUD CSS styling

Make the HUD container not rely on explicit values for positioning.
---
 content_scripts/vimium.css |  6 ++----
 pages/hud_page.css         | 21 ++++++++++++---------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index 4364b1d09..ef9a8fc2f 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -187,10 +187,8 @@ iframe.vimium-hud-frame {
   position: fixed;
   width: 20%;
   min-width: 350px;
-  height: 58px;
-  bottom: -14px;
-  right: 20px;
-  margin: 0 0 0 -40%;
+  bottom: 0;
+  right: 0;
   border: none;
   z-index: 2147483647;
   opacity: 0;
diff --git a/pages/hud_page.css b/pages/hud_page.css
index 34126d9c8..5ed2a83a0 100644
--- a/pages/hud_page.css
+++ b/pages/hud_page.css
@@ -1,15 +1,21 @@
 #hud-container {
+  --hud-container-shadow-size: 10px;
+  --hud-container-border-size: 1px;
+  --hud-container-side-offset: calc(
+    var(--hud-container-shadow-size) + var(--hud-container-border-size)
+  );
   display: block;
   position: fixed;
-  width: calc(100% - 20px);
-  bottom: 8px;
-  left: 8px;
+  bottom: 0;
+  left: var(--hud-container-side-offset);
+  right: var(--hud-container-side-offset);
   background-color: var(--vimium-foreground-color);
   color: var(--vimium-foreground-text-color);
   text-align: left;
-  border-radius: 4px;
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.8);
-  border: 1px solid #aaa;
+  border-radius: 4px 4px 0 0;
+  box-shadow: 0px 2px var(--hud-container-shadow-size) rgba(0, 0, 0, 0.8);
+  border: var(--hud-container-border-size) solid #aaa;
+  border-bottom: 0;
   z-index: 2147483647;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
@@ -23,14 +29,11 @@
 
 #hud {
   font-size: 14px;
-  height: 30px;
-  margin-bottom: 0;
   padding: 2px 4px;
   border-radius: 3px;
   width: 100%;
   outline: none;
   box-sizing: border-box;
-  line-height: 20px;
 }
 
 span#hud-find-input, span#hud-match-count {