Fixed spacing and moved tabindex in the action popup (#1619)

* fix spacing issues * move tabindex --------- Co-authored-by: martholomew <[email protected]>
yomidevs · Nov 27, 2024 · aa4dd16 · aa4dd16
1 parent a99eb89
commit aa4dd16
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git 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
@@ -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 {