Display layout updates (#1032)

* Fix display scroll not always using the right position

* Update display layout and scroll method

* Fix border size

2 files changed, 23 insertions, 13 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index f08125f5..f6317d54 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -115,12 +115,14 @@
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: var(--font-size);
     line-height: var(--line-height);
+    height: 100%;
 }
 body {
     margin: 0;
     border: 0;
     padding: 0;
-    overflow-y: scroll; /* always show scroll bar */
+    height: 100%;
+    overflow: hidden;
     background-color: var(--background-color);
     color: var(--default-text-color);
     font-size: inherit;
@@ -152,6 +154,24 @@ a {
 }
 
 
+/* Main layout */
+.content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    position: relative;
+    align-items: stretch;
+    justify-content: center;
+}
+.content-body {
+    flex: 1 1 auto;
+    height: 100%;
+}
+
+
 /* Navigation */
 .navigation-header {
     top: 0;
diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css
index 7ef32fb4..456add33 100644
--- a/ext/mixed/css/search.css
+++ b/ext/mixed/css/search.css
@@ -93,7 +93,7 @@ h1 {
     padding: 0.25em 0 0;
     font-weight: normal;
     box-sizing: border-box;
-    border-bottom: var(--thin-border-size) solid var(--separator-color1);
+    border-bottom: calc(1em / (var(--font-size-no-units) * 2)) solid var(--separator-color1);
 }
 
 /* Material design select */
@@ -229,17 +229,7 @@ label.toggle {
 }
 
 /* Content layout */
-.content {
-    flex: 1 0 auto;
-    flex-flow: row nowrap;
-    width: 100%;
-    display: flex;
-    position: relative;
-    align-items: stretch;
-    justify-content: center;
-}
-.content-center {
-    flex: 1 1 auto;
+.content-body {
     width: var(--main-content-size);
     padding: 0 var(--main-content-padding);
     max-width: var(--main-content-size);