From a96583fcacb514e07c47541a840a4d54ea9fcd51 Mon Sep 17 00:00:00 2001
From: William Idakwo <30729966+vixen24@users.noreply.github.com>
Date: Tue, 23 Dec 2025 18:51:13 +0100
Subject: [PATCH 1/2] Add margin to details inside popup styles

Allow focus indicator to display in full when navigating with the keyboard (using TAB)
---
 app/assets/stylesheets/popup.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 189cfef5b..d5b1e1e72 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -106,6 +106,7 @@
 
     details & {
       margin-inline-start: 0.75ch;
+      margin-block-start: 0.35ch;
     }
   }
 

From 2992b53577fef38e6c2682dde497515c12073ca9 Mon Sep 17 00:00:00 2001
From: William Idakwo <30729966+vixen24@users.noreply.github.com>
Date: Thu, 8 Jan 2026 08:45:58 +0100
Subject: [PATCH 2/2] Refactor popup.css styles for focus state

Remove margin-block-start from details in popup styles and add focus-visible style to popup item.
---
 app/assets/stylesheets/popup.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index d5b1e1e72..02ae8969e 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -106,7 +106,6 @@
 
     details & {
       margin-inline-start: 0.75ch;
-      margin-block-start: 0.35ch;
     }
   }
 
@@ -156,6 +155,10 @@
     max-inline-size: 100%;
     padding: var(--inline-space-half) var(--popup-item-padding-inline);
     text-align: start;
+    
+    &:focus-visible {
+      z-index: 1;
+    }
   }
 
   .popup__icon {