From 478667cc54d8191ddae1e66982a0d0601fae207d Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sun, 25 Feb 2024 01:44:35 -0800
Subject: [PATCH] style: fix scrollbar once and for all

---
 client/package-lock.json                      | 16 +++++++++++
 client/package.json                           |  1 +
 client/src/App.svelte                         | 15 ++++------
 .../lib/Apps/GBAEmulator/GBAEmulator.svelte   | 28 +++++++++----------
 client/src/lib/Loading/Loading.svelte         |  6 ++--
 5 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 13819b1..c4cca00 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12,6 +12,7 @@
         "howler": "^2.2.4",
         "material-icons": "^1.13.12",
         "material-symbols": "^0.15.0",
+        "overlayscrollbars-svelte": "^0.5.3",
         "socket.io-client": "^4.7.4",
         "svelte-french-toast": "^1.2.0",
         "svrollbar": "^0.12.0"
@@ -2089,6 +2090,21 @@
         "wrappy": "1"
       }
     },
+    "node_modules/overlayscrollbars": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-2.5.0.tgz",
+      "integrity": "sha512-CWVC2dwS07XZfLHDm5GmZN1iYggiJ8Vufnvzwt0gwR9Yz1hVckKeTxg7VILZeYVGhDYJHZ1Xc8Xfys5dWZ1qiA==",
+      "peer": true
+    },
+    "node_modules/overlayscrollbars-svelte": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/overlayscrollbars-svelte/-/overlayscrollbars-svelte-0.5.3.tgz",
+      "integrity": "sha512-oBuYVlCavo6FNSf+qnvrE9XGbRnnGmpLIGBMNBjlTieGB7v3/bPZ+/j06Zgs89sWn8mI73myMmgGXI97PHuxoQ==",
+      "peerDependencies": {
+        "overlayscrollbars": "^2.0.0",
+        "svelte": ">=3.54.0"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
diff --git a/client/package.json b/client/package.json
index 900b593..02b7cf9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -31,6 +31,7 @@
     "howler": "^2.2.4",
     "material-icons": "^1.13.12",
     "material-symbols": "^0.15.0",
+    "overlayscrollbars-svelte": "^0.5.3",
     "socket.io-client": "^4.7.4",
     "svelte-french-toast": "^1.2.0",
     "svrollbar": "^0.12.0"
diff --git a/client/src/App.svelte b/client/src/App.svelte
index db6e110..78f8fd0 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -48,7 +48,7 @@
 </script>
 
 <main
-  class="select-none transition-opacity duration-300 overflow-hidden"
+  class="select-none transition-opacity duration-300"
   class:opacity-0={loading}
 >
   <!-- driver dashboard -->
@@ -56,27 +56,22 @@
     <Dashboard />
   </div>
   <!-- the infotainment system -->
-  <div
-    class="min-h-screen w-[65vw] right-0 absolute infotainment-container overflow-x-hidden"
-  >
+  <div class="min-h-screen w-[65vw] right-0 absolute infotainment-container">
     <!-- dynamic app system (edit appList.ts to add new apps) -->
-    <div class="mx-10 mt-10 overflow-x-hidden">
+    <div class="mx-10 mt-10 overflow-hidden">
       <svelte:component this={appList[activeApp].component} />
     </div>
-    <div
-      class="fixed w-[65vw] flex justify-center right-0 bottom-0 mb-4 overflow-x-hidden"
-    >
+    <div class="fixed w-[65vw] flex justify-center right-0 bottom-0 mb-4">
       <AppBar bind:activeApp {appList} />
     </div>
   </div>
-
-  <!-- toast service -->
 </main>
 
 {#if loading}
   <Loading />
 {/if}
 
+<!-- toast service -->
 <Toaster />
 
 <style lang="postcss">
diff --git a/client/src/lib/Apps/GBAEmulator/GBAEmulator.svelte b/client/src/lib/Apps/GBAEmulator/GBAEmulator.svelte
index 7ec1b3f..78d75dc 100644
--- a/client/src/lib/Apps/GBAEmulator/GBAEmulator.svelte
+++ b/client/src/lib/Apps/GBAEmulator/GBAEmulator.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-  import AppContainer from '../AppContainer.svelte'
-  import { Notifications } from '../../Notifications/notifications'
-  import { onMount } from 'svelte'
-  import { gbaEmulatorBootupSequence } from '../../Sequences/sequences'
+  import AppContainer from "../AppContainer.svelte";
+  import { Notifications } from "../../Notifications/notifications";
+  import { onMount } from "svelte";
+  import { gbaEmulatorBootupSequence } from "../../Sequences/sequences";
 
   onMount(() => {
-    fetch('/static/external-apps/gba-emulator/index.html')
+    fetch("/static/external-apps/gba-emulator/index.html")
       .then((res: Response) => {
         if (!res.ok) {
-          throw new Error('GBA failed to load', { cause: res })
+          throw new Error("GBA failed to load", { cause: res });
         } else {
-          gbaEmulatorBootupSequence()
+          gbaEmulatorBootupSequence();
         }
       })
       .catch(() => {
         Notifications.error(
-          'Failed to load the GBA Emulator app. Did you add it to the app/static/external-apps directory?',
+          "Failed to load the GBA Emulator app. Did you add it to the app/static/external-apps directory?",
           { duration: 10000 }
-        )
-      })
+        );
+      });
     Notifications.warn(
-      'The GBA Emulator is currently not working in this version of Jankboard.'
-    )
-  })
+      "The GBA Emulator is currently not working in this version of Jankboard."
+    );
+  });
 </script>
 
-<AppContainer useContainer={false} class="h-screen w-full">
+<AppContainer class="h-screen w-full">
   <!-- <iframe
     title="GBA Emulator"
     src="/static/external-apps/gba-emulator/index.html"
diff --git a/client/src/lib/Loading/Loading.svelte b/client/src/lib/Loading/Loading.svelte
index d92a2df..4b9f059 100644
--- a/client/src/lib/Loading/Loading.svelte
+++ b/client/src/lib/Loading/Loading.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { blur } from 'svelte/transition'
+  import { blur } from "svelte/transition";
 
-  import SvelteLogo from './SvelteLogo.svelte'
+  import SvelteLogo from "./SvelteLogo.svelte";
 </script>
 
 <div
-  class="absolute w-screen h-screen flex justify-center items-center flex-col overflow-hidden bg"
+  class="absolute w-screen h-screen flex justify-center items-center flex-col overflow-hidden select-none bg"
   transition:blur={{ duration: 300, amount: 0.5 }}
 >
   <div class="max-w-64">