From b1a47b85b59f05f0f5298d55372fe86fdd56950f Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Tue, 16 Aug 2022 20:05:31 +0100
Subject: [PATCH] [PS-1303] Desktop/browser: tweak `.box-header-expandable`
 styles (#3308)

* Add extra margin for desktop settings expanded header buttons

* Only change box-header-expandable background on `:focus-visible` not `:focus`

Avoids having the background colour "stick" when clicking with the mouse until you click somewhere else
---
 apps/browser/src/popup/scss/box.scss | 2 +-
 apps/desktop/src/scss/box.scss       | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index 7139f4514d..6e0b6f9356 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -33,7 +33,7 @@
     }
 
     &:hover,
-    &:focus,
+    &:focus-visible,
     &.active {
       @include themify($themes) {
         background-color: themed("boxBackgroundHoverColor");
diff --git a/apps/desktop/src/scss/box.scss b/apps/desktop/src/scss/box.scss
index b3bd4004e2..64cbf370ab 100644
--- a/apps/desktop/src/scss/box.scss
+++ b/apps/desktop/src/scss/box.scss
@@ -48,7 +48,7 @@
     }
 
     &:hover,
-    &:focus,
+    &:focus-visible,
     &.active {
       @include themify($themes) {
         background-color: themed("boxBackgroundHoverColor");
@@ -77,6 +77,10 @@
 
     &.box-content-padded {
       padding: 10px 15px;
+
+      .box-header-expandable[aria-expanded="true"] {
+        margin-bottom: 1rem;
+      }
     }
 
     &.condensed .box-content-row,