settings: Use em for header instead of px.

web/styles/app_variables.css

@@ -528,10 +528,10 @@
     --overlay-container-height: 95vh;
     --overlay-container-max-height: 1000px;
     /* .subscriptions-header and .settings-header */
-    --settings-overlay-header-height: 45px;
+    --settings-overlay-header-height: 3.2142em; /* 45px at 14px/em */
     /* .display-type and .list-toggler-container
        in subscriptions and user group settings overlays */
-    --settings-overlay-subheader-height: 44px;
+    --settings-overlay-subheader-height: 3.1428em; /* 44px at 14px/em */
     /* .settings-sticky-footer */
     --subscriptions-overlay-sticky-footer-height: 60px;
     /* Informational overlay */

web/styles/settings.css

@@ -1320,7 +1320,9 @@ label.preferences-radio-choice-label {
         .tab-container {
             box-sizing: border-box;
             height: var(--settings-overlay-header-height);
-            padding: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             background-color: var(--color-background-modal-bar);
             border-bottom: 1px solid var(--color-border-modal-bar);
 
@@ -1333,7 +1335,7 @@ label.preferences-radio-choice-label {
 
                     .ind-tab {
                         width: auto;
-                        min-width: 95px;
+                        min-width: 6.7857em; /* 95px at 14px em */
                     }
                 }
             }
@@ -1442,6 +1444,9 @@ label.preferences-radio-choice-label {
 
     .settings-header {
         padding-top: 1px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         &.mobile {
             display: none;
@@ -1449,9 +1454,6 @@ label.preferences-radio-choice-label {
 
             .fa-chevron-left {
                 float: left;
-                position: relative;
-                top: 14px;
-                left: 10px;
             }
         }
 
@@ -1459,26 +1461,19 @@ label.preferences-radio-choice-label {
             text-align: center;
             font-size: 1.1em;
             line-height: 1;
-            margin: 15px;
             text-transform: uppercase;
         }
 
         .exit {
             font-weight: 600;
             position: absolute;
-            top: 10px;
             right: 10px;
             color: hsl(0deg 0% 67%);
             cursor: pointer;
         }
 
         .exit-sign {
-            float: right;
-            position: relative;
-            top: 1px;
-            margin-left: 3px;
-            font-size: 1.5rem;
-            line-height: 1;
+            font-size: 1.5em;
             font-weight: 600;
             cursor: pointer;
         }
@@ -1802,7 +1797,24 @@ label.preferences-radio-choice-label {
 
     #settings_page {
         .settings-header.mobile {
-            display: block;
+            display: flex;
+            justify-content: space-between;
+            height: var(--settings-overlay-header-height);
+
+            .fa-chevron-left {
+                transform: translate(-50px, 0);
+                opacity: 0;
+                color: hsl(0deg 0% 67%);
+                padding: 2px 10px;
+                cursor: pointer;
+                transition: none 0.3s ease;
+                transition-property: opacity, transform;
+            }
+
+            .exit {
+                position: static;
+                margin-right: 10px;
+            }
 
             &:not(.slide-left) .section {
                 /* When viewing the settings list we hide the active section. */
@@ -1832,8 +1844,10 @@ label.preferences-radio-choice-label {
             position: absolute;
             width: 100%;
             border: none;
-            /* 48px is the height of settings header and 45px is the height of tab-container */
-            height: calc(100% - 93px);
+            height: calc(
+                100% - var(--settings-overlay-header-height) -
+                    var(--settings-overlay-subheader-height)
+            );
 
             & li.active {
                 /* Don't highlight the active section in the settings list. */

web/styles/subscriptions.css

@@ -268,8 +268,7 @@ h4.user_group_setting_subsection_title {
 }
 
 .subscriptions-container .subscriptions-header .fa-chevron-left,
-.user-groups-container .user-groups-header .fa-chevron-left,
-#settings_overlay_container .settings-header.mobile .fa-chevron-left {
+.user-groups-container .user-groups-header .fa-chevron-left {
     position: relative;
     transform: translate(-50px, 0);
     opacity: 0;
@@ -364,7 +363,7 @@ h4.user_group_setting_subsection_title {
     }
 
     .exit-sign {
-        font-size: 1.5rem;
+        font-size: 1.5em;
         margin-right: 10px;
         font-weight: 600;
         cursor: pointer;
@@ -548,7 +547,7 @@ h4.user_group_setting_subsection_title {
     position: relative;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    height: calc(100% - 85px);
+    height: calc(100% - 6.0714em); /* 85px at 14px em */
     width: 100%;
 }
 

web/templates/settings_overlay.hbs

@@ -5,7 +5,6 @@
         <div class="exit">
             <span class="exit-sign">&times;</span>
         </div>
-        <div class="clear-float"></div>
     </div>
     <div class="sidebar-wrapper">
         <div class="tab-container"></div>