Noissue - Center the content and unfix on small screens the sidebar

skin/new-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 35 matching lines @@
 
 html
 {
   font-size: 16px;
 }
 
 body
 {
   background-color: #F3F3F3;
   display: flex;
+  justify-content: center;
   margin: 1.2rem 0.3rem;
   font-family: "Source Sans Pro", sans-serif;
   font-size: 1.25rem;
   color: #494949;
 }
 
 h1
 {
   font-size: 3rem;
   font-weight: 300;
@@ skipping 346 matching lines @@
 #sidebar
 {
   flex-shrink: 0; 
 }
 
 #sidebar .fixed
 {
   top: 1.2rem;
   bottom: 0rem;
   height: auto;
-  position: fixed;
 }
 
 #sidebar header
 {
   text-align: right;
   margin-right: 2rem;
 }
 
 html[dir="rtl"] #sidebar header
 {
@@ skipping 69 matching lines @@
 li a[role="tab"][aria-selected]
 {
   -moz-border-start-color: #CDCDCD;
   -webkit-border-start-color: #CDCDCD;
   font-weight: 700;
   background-color: #FFF;
 }
 
 #sidebar footer
 {
-  bottom: 0px;
-  position: absolute;
   width: 100%;
 }
 
 #sidebar footer p
 {
   display: flex;
   justify-content: center;
   margin: 1.2rem 0rem;
 }
 
+/* This is a stopgap solution of footer overlapping tabs on low resolutions */
+@media (min-height: 37rem)
+{
+  #sidebar .fixed
+  {
+    position: fixed;
+  }
+
+  #sidebar footer
+  {
+    bottom: 0px;
+    position: absolute;
+  }
+}
+
 /*
   Main content
  */
 
 body[data-tab|="general"] #content-general,
 body[data-tab|="advanced"] #content-advanced,
 body[data-tab|="whitelist"] #content-whitelist,
 body[data-tab|="help"] #content-help
 {
   display: block;
@@ skipping 902 matching lines @@
 
 #hide-notification::after
 {
   background-color: #099DD1;
 }
 
 #hide-notification:hover::after
 {
   background-color: #5CBCE1;
 }