From aa4dd16722f062be3e84c0f6dfd4f0df25d707c0 Mon Sep 17 00:00:00 2001
From: Matttttt <18152455+martholomew@users.noreply.github.com>
Date: Wed, 27 Nov 2024 02:09:39 +0000
Subject: [PATCH] Fixed spacing and moved tabindex in the action popup (#1619)

* fix spacing issues

* move tabindex

---------

Co-authored-by: martholomew <martholomew@users.noreply.github.com>
---
 ext/action-popup.html    |  4 ++--
 ext/css/action-popup.css | 38 ++++++++++++++++++++------------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/ext/action-popup.html b/ext/action-popup.html
index be862649f..9ea99dab4 100644
--- a/ext/action-popup.html
+++ b/ext/action-popup.html
@@ -20,12 +20,12 @@
         Loading...
     </div>
     <div id="action-popup">
-        <div tabindex="0" class="action-container action-select-profile" hidden>
+        <div class="action-container action-select-profile" hidden>
             <div class="action-item-left">
                 <h2 class="action-title">Profile</h2>
             </div>
             <div class="action-item-right">
-                <select class="profile-select" id="profile-select">
+                <select tabindex="0"  class="profile-select" id="profile-select">
                 </select>
             </div>
         </div>
diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css
index 8f007dd6b..0f536d55d 100644
--- a/ext/css/action-popup.css
+++ b/ext/css/action-popup.css
@@ -197,24 +197,6 @@ input[type=checkbox]~.toggle-group>.toggle-handle:active:focus {
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 
-/* Actions */
-
-.action-select-profile {
-    position: relative;
-}
-
-select.profile-select {
-    width: 7em;
-    height: 100%;
-    box-sizing: border-box;
-    border: 0;
-    margin: 0;
-    cursor: pointer;
-    font-size: var(--font-size);
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 /* Action Containers */
 
 h2.action-title {
@@ -273,12 +255,32 @@ h2.action-title {
     justify-content: space-between;
     align-items: center;
     padding: 10px;
+    gap: 0.25em;
 }
 
 .action-container button {
     flex: 0 0 auto;
 }
 
+/* Actions */
+
+.action-container.action-select-profile {
+    position: relative;
+    gap: 0.5em;
+}
+
+select.profile-select {
+    width: 7em;
+    height: 100%;
+    box-sizing: border-box;
+    border: 0;
+    margin: 0;
+    cursor: pointer;
+    font-size: var(--font-size);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* Tooltip */
 
 .tooltip {