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 347 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;
 }
 
+@media (min-height: 37rem)

[saroyanm, 2017/09/25 22:02:13]

@Thomas can you please send the link to the solution you mentioned to me today,
so I'll adapt this accordingly.

[Thomas Greiner, 2017/09/26 10:40:38]

This is a bit of a hack because it depends on the height of the sidebar contents
which may change.

Why do we care about this in the first place? We don't need to optimize for
smaller screens yet. If we did we should probably work on other stuff to fix
this, such as introducing a scrollable hamburger menu and using proper font
sizes that make better use of the available screen real estate.

[Thomas Greiner, 2017/09/26 10:40:38]

What I was mentioning was `position: sticky` but according to MDN it doesn't
look like we can use it yet because it has only been introduced in Chrome in
version 56.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compatibility

[saroyanm, 2017/09/26 16:55:48]

As we did introduce fixed root element and prevented people from increasing the
font-size, this solution will fix the edge case of zooming using `ctrl + "+"`.
Also considering translations being long this can be a good help for us to
manage the "stickiness:)".
Alternative 1: I could use two Absolute layouts and Z-index and hide the footer
behind tabs, which will look funny.
Alternative2: I can use JavaScript to make the footer unstick.

I can't see much more options right now, but my favoite would be not to
introduce footer in sidebar that is pushed to the bottom.

[saroyanm, 2017/09/26 16:55:48]

I see.

[Thomas Greiner, 2017/09/27 13:27:50]

Ok, since there's no good solution that we can implement quickly, let's leave it
as is. However, please add a comment to the code to explain why this workaround
is necessary.

[saroyanm, 2017/09/27 14:56:43]

Agree, done.

+{
+  #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 903 matching lines @@
 
 #hide-notification::after
 {
   background-color: #099DD1;
 }
 
 #hide-notification:hover::after
 {
   background-color: #5CBCE1;
 }