fix: bottom padding of setting panel is not show on firefox on conten…

…t overflow
icelam · Feb 21, 2021 · 2b8c50f · 2b8c50f
1 parent 7fbcd2e
commit 2b8c50f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 25 deletions.
diff --git a/src/assets/scss/_slot.scss b/src/assets/scss/_slot.scss
@@ -136,18 +136,31 @@
 
   &__panel {
     position: fixed;
-    z-index: $z-index-settings;
     top: 0;
     right: 0;
+    z-index: $z-index-settings;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     height: 100%;
     width: 100%;
     max-width: $setting-panel-max-width;
-    padding: 3.125rem;
+    padding: 3.125rem 3.125rem 0 3.125rem;
     overflow: auto;
     -webkit-overflow-scrolling: auto;
 
+    // Worksround for firefox overflow padding bottom issue
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=748518
+    &__group:last-child {
+      padding-bottom: 3.125rem;
+    }
+
     @media #{$mobile} {
-      padding: 10%;
+      padding: 10% 10% 0 10%;
+
+      &__group:last-child {
+        padding-bottom: 10%;
+      }
     }
   }
 

diff --git a/src/pages/landing.pug b/src/pages/landing.pug
@@ -24,26 +24,24 @@ include ../mixins/icons
 
   #settings.settings
     #settings-panel.settings__panel
-      //- div.align--right
-      //-   .icon-button#settings-close
-      //-     +svg-icon.red.big(svg-icon-name='close')
-      h1.settings__title Settings
-      div.input-group
-        label.input-label(for="name-list") Name List
-        textarea.input-field.input-field--textarea(rows="8" placeholder="Separate each name by line break" id="name-list")
-
-      div.input-group.input-group--2-column
-        label.input-label(for="remove-from-list") Remove winner from list
-        label.input--switch
-          input(type="checkbox" checked="true" id="remove-from-list")
-          span.slider
-
-      div.input-group.input-group--2-column
-        label.input-label(for="enable-sound") Enable sound effect
-        label.input--switch
-          input(type="checkbox" checked="true" id="enable-sound")
-          span.slider
-
-      button#settings-save.solid-button.solid-button Save
-      button#settings-close.solid-button.solid-button--danger Discard and close
+      div.settings__panel__group
+        h1.settings__title Settings
+        div.input-group
+          label.input-label(for="name-list") Name List
+          textarea.input-field.input-field--textarea(rows="8" placeholder="Separate each name by line break" id="name-list")
+
+        div.input-group.input-group--2-column
+          label.input-label(for="remove-from-list") Remove winner from list
+          label.input--switch
+            input(type="checkbox" checked="true" id="remove-from-list")
+            span.slider
+
+        div.input-group.input-group--2-column
+          label.input-label(for="enable-sound") Enable sound effect
+          label.input--switch
+            input(type="checkbox" checked="true" id="enable-sound")
+            span.slider
+      div.settings__panel__group
+        button#settings-save.solid-button.solid-button Save
+        button#settings-close.solid-button.solid-button--danger Discard and close