From 5c4c5042b3808f0570068e27937e2c4be3badddf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20D=C3=A4schle?= <daniel.daeschle@gmail.com>
Date: Sun, 27 Dec 2020 15:14:16 +0100
Subject: [PATCH] vdoc: fix scrollbar on mobile (#7614)

---
 cmd/tools/vdoc/resources/doc.css | 24 +++++++++++++++++++-----
 cmd/tools/vdoc/vdoc.v            | 14 ++++++++------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/cmd/tools/vdoc/resources/doc.css b/cmd/tools/vdoc/resources/doc.css
index 80df8972e2..9e8bf94e97 100644
--- a/cmd/tools/vdoc/resources/doc.css
+++ b/cmd/tools/vdoc/resources/doc.css
@@ -79,7 +79,9 @@ body {
 }
 #page {
 	height: 100%;
-	overflow-y: scroll;
+	padding-top: 56px;
+	box-sizing: border-box;
+	overflow: hidden;
 }
 
 /** Reset for menus */
@@ -112,8 +114,8 @@ body {
 	font-family: 'Work Sans', sans-serif;
 }
 *::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
+	width: 4px;
+	height: 4px;
 }
 *::-webkit-scrollbar-track {
 	background: transparent;
@@ -256,10 +258,13 @@ body {
 }
 
 /* Main content */
+.doc-scrollview {
+	height: 100%;
+	overflow-y: scroll;
+}
 .doc-container {
 	display: flex;
 	flex-direction: column-reverse;
-	margin-top: 56px;
 }
 .doc-content {
 	display: flex;
@@ -505,6 +510,13 @@ pre {
 
 /* Medium screen and up */
 @media (min-width: 768px) {
+	*::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+	*::-webkit-scrollbar-thumb {
+		border: 3px solid transparent;
+	}
 	.doc-container {
 		flex-direction: row;
 	}
@@ -549,6 +561,9 @@ pre {
 }
 
 @media (min-width: 1024px) {
+	#page {
+		padding-top: 0;
+	}
 	.doc-nav {
 		width: 300px;
 	}
@@ -584,7 +599,6 @@ pre {
 		padding-bottom: 1rem;
 	}
 	.doc-container {
-		margin-top: 0;
 		margin-left: 300px;
 	}
 	.doc-node {
diff --git a/cmd/tools/vdoc/vdoc.v b/cmd/tools/vdoc/vdoc.v
index 923c0bc333..db177d4bff 100644
--- a/cmd/tools/vdoc/vdoc.v
+++ b/cmd/tools/vdoc/vdoc.v
@@ -81,14 +81,16 @@ const (
 					</ul>
 				</nav>
 			</header>
-			<div class="doc-container">
-				<div class="doc-content">
-					{{ contents }}
-					<div class="footer">
-						{{ footer_content }}
+			<div class="doc-scrollview">
+				<div class="doc-container">
+					<div class="doc-content">
+						{{ contents }}
+						<div class="footer">
+							{{ footer_content }}
+						</div>
 					</div>
+					{{ right_content }}
 				</div>
-				{{ right_content }}
 			</div>
 		</div>
 		{{ footer_assets }}