From a39b68cbfbc66f87956f81bf5099f9900b23c552 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Thu, 14 Apr 2022 19:35:08 +0200
Subject: [PATCH] Replace scroll bar hiding hack with scrollbar-width: none

---
 svelte/src/file_viewer/FileViewer.svelte    | 43 +++++++--------------
 svelte/src/file_viewer/viewers/Video.svelte |  2 +-
 2 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index 8b14231..e9ba1bb 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -372,7 +372,7 @@ const keyboard_event = evt => {
 		</div>
 	{/if}
 
-	<div id="headerbar" class="headerbar" class:embedded>
+	<div id="headerbar" class="headerbar">
 		<button
 			on:click={toolbar_toggle}
 			class="button_toggle_toolbar round"
@@ -404,10 +404,6 @@ const keyboard_event = evt => {
 		{/if}
 	</div>
 
-	<!-- {#if ads_enabled}
-		<UkrainePopup></UkrainePopup>
-	{/if} -->
-
 	{#if is_list && view === "file"}
 		<ListNavigator
 			bind:this={list_navigator}
@@ -422,7 +418,7 @@ const keyboard_event = evt => {
 	<CustomBanner src={custom_header} border_top={true}></CustomBanner>
 
 	<div class="file_preview_row">
-		<div id="toolbar" class="toolbar" class:toolbar_visible><div><div>
+		<div id="toolbar" class="toolbar" class:toolbar_visible>
 			{#if view === "file"}
 				<FileStats file={file}></FileStats>
 				<hr/>
@@ -553,7 +549,7 @@ const keyboard_event = evt => {
 				</button>
 			{/if}
 			<br/>
-		</div></div></div>
+		</div>
 
 		<div bind:this={file_preview_background}
 			class="file_preview"
@@ -649,8 +645,10 @@ const keyboard_event = evt => {
 	text-align: left;
 	padding: 4px;
 }
-.headerbar.embedded {
-	padding: 2px;
+@media(max-height: 600px) {
+	.headerbar {
+		padding: 1px;
+	}
 }
 
 /* Headerbar components */
@@ -717,7 +715,9 @@ const keyboard_event = evt => {
 .toolbar {
 	position: absolute;
 	width: 8em;
-	overflow: hidden;
+	overflow-y: auto;
+	overflow-x: hidden;
+	scrollbar-width: none;
 	left: -8em;
 	bottom: 0;
 	top: 0;
@@ -726,27 +726,12 @@ const keyboard_event = evt => {
 	transition: left 0.5s, right 0.5s;
 	z-index: 1;
 }
+.toolbar::-webkit-scrollbar {
+	display: none;
+}
 .toolbar.toolbar_visible { left: 0; }
 
-/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
-.toolbar > div {
-	position: absolute;
-	left: 0;
-	top: 0;
-	bottom: 0;
-	right: -30px;
-	overflow-y: scroll;
-	overflow-x: hidden;
-}
-.toolbar > div > div {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 8em;
-	height: auto;
-	text-align: center;
-}
-.toolbar_button{
+.toolbar_button {
 	text-align: left;
 	width: calc(100% - 6px);
 }
diff --git a/svelte/src/file_viewer/viewers/Video.svelte b/svelte/src/file_viewer/viewers/Video.svelte
index f4f5750..0e9e938 100644
--- a/svelte/src/file_viewer/viewers/Video.svelte
+++ b/svelte/src/file_viewer/viewers/Video.svelte
@@ -219,7 +219,7 @@ h1 {
 	vertical-align: middle;
 	border-radius: 8px;
 }
-@media(max-height: 600px) {
+@media(max-height: 500px) {
 	.container {
 		flex-direction: row;
 	}