Fix user switcher overflow

Overflow scroll elements doesn't play well with overflowing children with position anything but static: twbs/bootstrap#24251 Fix by padding with spacer div since user switcher has a known maximum height.
ub-digit · Mar 1, 2019 · acb7cca · acb7cca
1 parent 5582f43
commit acb7cca
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -213,3 +213,7 @@ html {
   margin-top: 100px;
   width: 300px;
 }
+
+.user-switcher-spacer {
+  height: map-get($spacers, 4) * 3;
+}
diff --git a/app/templates/admin/index.hbs b/app/templates/admin/index.hbs
@@ -252,8 +252,8 @@ as |form|
     </table>
   </div>
 </div>
-{{#if (gt model.meta.pagination.pages 1)}}
-  <div class="row">
+<div class="row">
+  {{#if (gt model.meta.pagination.pages 1)}}
     <div class="col-12 d-flex justify-content-center">
       {{bs4-paginator
         navAreaLabelText="Orders pagination"
@@ -268,6 +268,8 @@ as |form|
       }}
       {{! TODO rename => onPageChange}}
     </div>
-  </div>
-{{/if}}
+  {{else}}
+    <div class="col-12 user-switcher-spacer"></div>
+  {{/if}}
+</div>
 {{outlet}}