UX: Select-kit update alignment fixes (#14199)

UX: Select-kit update alignment fixes (#14199)

diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 506e552..2fa6dc0 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -79,10 +79,6 @@
           min-height: unset;
         }
 
-        &:focus {
-          border: 1px solid transparent;
-        }
-
         .d-icon + .d-icon {
           margin-left: 0.25em;
         }
diff --git a/app/assets/stylesheets/common/select-kit/period-chooser.scss b/app/assets/stylesheets/common/select-kit/period-chooser.scss
index 15a9ff2..a4b3027 100644
--- a/app/assets/stylesheets/common/select-kit/period-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/period-chooser.scss
@@ -9,9 +9,9 @@
       }
 
       .period-chooser-header {
+        display: inline-block; // safari 14 has issues with summary elements and flexbox
         background: none;
         border: none;
-        justify-content: flex-start;
         width: auto;
         height: auto;
         padding: 0;
@@ -21,6 +21,11 @@
           display: inline-block;
           box-sizing: border-box;
 
+          // for text + caret alignment
+          line-height: 1;
+          vertical-align: bottom;
+          margin-bottom: 10px;
+
           .date-section {
             color: var(--primary);
             margin-right: 5px;
diff --git a/app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss b/app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss
index b04b704..423c6ec 100644
--- a/app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss
+++ b/app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss
@@ -1,6 +1,7 @@
 .select-kit {
   &.dropdown-select-box {
     &.user-notifications-dropdown {
+      display: flex;
       text-align: left;
 
       .d-icon {
@@ -12,8 +13,8 @@
         max-width: 485px;
       }
 
-      .dropdown-select-box-header {
-        align-items: center;
+      .select-kit-header-wrapper {
+        justify-content: center;
       }
     }
   }
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 86535bb..dbb70f0 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -244,7 +244,6 @@
         display: flex;
         flex: 1 1 auto;
         flex-wrap: wrap;
-        margin-left: -1em;
         li,
         > span {
           display: flex;
@@ -264,6 +263,10 @@
         }
       }
 
+      > ul {
+        margin-left: -1em; // negates left button margin, for alignment
+      }
+
       .user-profile-controls-outlet {
         margin: 0 0 0 1em;
         li {

GitHub sha: 94085d0996cd02ffb72f0f12950bd972291909b6

This commit appears in #14199 which was approved by jjaffeux. It was merged by jjaffeux.