[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

@@ -33,7 +33,7 @@
     }
 
     &:hover,
-    &:focus,
+    &:focus-visible,
     &.active {
       @include themify($themes) {
         background-color: themed("boxBackgroundHoverColor");

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,