Fix setting menu height

- Increase max height to match page height
- Move settings 8px from the right instead of 5px to match other top
  menus
- Handle overflow of the content correctly

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

core/css/header.css

@@ -95,10 +95,11 @@
   position: absolute;
   max-width: 350px;
   min-height: 66px;
-  max-height: calc(100vh - 50px * 2);
-  right: 5px;
+  max-height: calc(100vh - 50px - 8px);
+  right: 8px;
   top: 50px;
   margin: 0;
+  overflow-y: scroll;
   /* Dropdown arrow */
   /* Use by the settings right menu */
 }
@@ -120,7 +121,7 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   min-height: 66px;
-  max-height: calc(100vh - 50px * 2);
+  max-height: calc(100vh - 50px - 8px);
 }
 #header .header-right > div > .menu.settings-menu > ul {
   padding: 4px;

core/css/header.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["variables.scss","header.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AAAA;EAEC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAIF;AACA;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA,QDqEe;ECpEf;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AASF;AACC;AAmIA;;AAhIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAfD;EACA;EAgBC;EACA,KD0Bc;ECzBd;AAMA;AAoBA;;AAxBA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAEC;EACA;EAzCF;EACA;;AA6CC;EACC;EACA;EACA;EACA;;AAEC;EACC;EACA;EACA;EACA,QAlDuB;EAmDvB;EACA;EACA;EACA;EACA;EACA;;AACA;EAEC;;AAED;EAEC;;AAED;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAML;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAKA;AAAA;EAEC;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA,ODtGY;ECuGZ;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;;;AAOL;AAEA;EACC;;;AAGD;AACA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;AAEA;;AACA;EACC;AAAY;EACZ;AAqBA;AA2BA;;AA9CA;EAGC;;AAEA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAKF;EACC;EACA;EACA;AAMA;;AAJA;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;AAEA;;AACA;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,KDnPc;;;ACwPhB;AAGC;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA","file":"header.css"}
+{"version":3,"sourceRoot":"","sources":["variables.scss","header.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AAAA;EAEC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAIF;AACA;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA,QDqEe;ECpEf;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AASF;AACC;AAoIA;;AAjIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAfD;EACA;EAgBC;EACA,KD0Bc;ECzBd;EACA;AAMA;AAoBA;;AAxBA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAEC;EACA;EA1CF;EACA;;AA8CC;EACC;EACA;EACA;EACA;;AAEC;EACC;EACA;EACA;EACA,QAnDuB;EAoDvB;EACA;EACA;EACA;EACA;EACA;;AACA;EAEC;;AAED;EAEC;;AAED;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAML;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAKA;AAAA;EAEC;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA,ODvGY;ECwGZ;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;;;AAOL;AAEA;EACC;;;AAGD;AACA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;AAEA;;AACA;EACC;AAAY;EACZ;AAqBA;AA2BA;;AA9CA;EAGC;;AAEA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAKF;EACC;EACA;EACA;AAMA;;AAJA;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;AAEA;;AACA;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,KDpPc;;;ACyPhB;AAGC;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA","file":"header.css"}

core/css/header.scss

@@ -62,7 +62,7 @@
 
 @mixin header-menu-height() {
 	min-height: calc(44px * 1.5); // show at least 1.5 entries
-	max-height: calc(100vh - #{variables.$header-height} * 2);
+	max-height: calc(100vh - #{variables.$header-height} - 8px);
 }
 
 #header {
@@ -78,9 +78,10 @@
 		position: absolute;
 		max-width: 350px;
 		@include header-menu-height();
-		right: 5px; // relative to parent
+		right: 8px; // relative to parent
 		top: variables.$header-height;
 		margin: 0;
+		overflow-y: scroll;
 
 		&:not(.popovermenu) {
 			display: none;

core/css/server.css

@@ -2313,10 +2313,11 @@ label.infield {
   position: absolute;
   max-width: 350px;
   min-height: 66px;
-  max-height: calc(100vh - 50px * 2);
-  right: 5px;
+  max-height: calc(100vh - 50px - 8px);
+  right: 8px;
   top: 50px;
   margin: 0;
+  overflow-y: scroll;
   /* Dropdown arrow */
   /* Use by the settings right menu */
 }
@@ -2338,7 +2339,7 @@ label.infield {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   min-height: 66px;
-  max-height: calc(100vh - 50px * 2);
+  max-height: calc(100vh - 50px - 8px);
 }
 #header .header-right > div > .menu.settings-menu > ul {
   padding: 4px;