From afa26f7eea062bf3cd13069b6695a4582c5132ba Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sun, 25 Feb 2024 01:21:13 -0800
Subject: [PATCH] style: annihilate scrollbar

---
 client/src/App.svelte                   | 78 ++++++++++++-------------
 client/src/app.css                      |  7 ++-
 client/src/lib/Apps/AppContainer.svelte | 14 ++---
 3 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/client/src/App.svelte b/client/src/App.svelte
index 5ab43d6..eee6add 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -1,58 +1,58 @@
 <script lang="ts">
-  import '@fontsource/roboto/latin.css'
-  import 'material-icons/iconfont/material-icons.css'
-  import Dashboard from './lib/Dashboard/Dashboard.svelte'
-  import 'material-symbols'
-  import AppBar from './lib/Apps/AppBar.svelte'
-  import { appList } from './lib/Apps/appList'
-  import { initializeTelemetry } from './lib/utils/initializeTelemetry'
-  import { onMount } from 'svelte'
-  import { Toaster } from 'svelte-french-toast'
-  import { initializationSequence } from './lib/Sequences/sequences'
-  import Loading from './lib/Loading/Loading.svelte'
-  import { settingsStore } from './lib/stores/settingsStore'
-  import getSettings from './lib/utils/getSettings'
-  import { Svrollbar } from 'svrollbar'
+  import "@fontsource/roboto/latin.css";
+  import "material-icons/iconfont/material-icons.css";
+  import Dashboard from "./lib/Dashboard/Dashboard.svelte";
+  import "material-symbols";
+  import AppBar from "./lib/Apps/AppBar.svelte";
+  import { appList } from "./lib/Apps/appList";
+  import { initializeTelemetry } from "./lib/utils/initializeTelemetry";
+  import { onMount } from "svelte";
+  import { Toaster } from "svelte-french-toast";
+  import { initializationSequence } from "./lib/Sequences/sequences";
+  import Loading from "./lib/Loading/Loading.svelte";
+  import { settingsStore } from "./lib/stores/settingsStore";
+  import getSettings from "./lib/utils/getSettings";
+  import { Svrollbar } from "svrollbar";
 
-  let activeApp: App = 'camera'
+  let activeApp: App = "camera";
   let topics: TelemetryTopics = {
     doubles: [
-      'orientation',
-      'chassis-x-speed',
-      'chassis-y-speed',
-      'accx',
-      'accy',
-      'accz',
-      'jerk-x',
-      'jerk-y',
-      'voltage',
+      "orientation",
+      "chassis-x-speed",
+      "chassis-y-speed",
+      "accx",
+      "accy",
+      "accz",
+      "jerk-x",
+      "jerk-y",
+      "voltage",
     ],
-    strings: ['acc-profile', 'gear'],
-    booleans: ['ebrake', 'reorient', 'gpws'],
-  }
+    strings: ["acc-profile", "gear"],
+    booleans: ["ebrake", "reorient", "gpws"],
+  };
 
-  let loading = $settingsStore.fastStartup ? false : true
+  let loading = $settingsStore.fastStartup ? false : true;
 
   onMount(() => {
-    let savedSettings = getSettings()
+    let savedSettings = getSettings();
     if (savedSettings !== false) {
-      settingsStore.set(savedSettings)
+      settingsStore.set(savedSettings);
     }
-    initializeTelemetry(topics, 200)
+    initializeTelemetry(topics, 200);
     setTimeout(() => {
-      loading = false
-      initializationSequence()
-    }, 3000)
-  })
+      loading = false;
+      initializationSequence();
+    }, 3000);
+  });
 
-  let infotainmentViewport: Element
-  let infotainmentContent: Element
+  let infotainmentViewport: Element;
+  let infotainmentContent: Element;
 </script>
 
 <Svrollbar />
 
 <main
-  class="select-none transition-opacity duration-300 overflow-x-hidden"
+  class="select-none transition-opacity duration-300 overflow-hidden"
   class:opacity-0={loading}
 >
   <!-- driver dashboard -->
@@ -87,7 +87,7 @@
 
 <style lang="postcss">
   main {
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
   }
 
   .infotainment-container {
diff --git a/client/src/app.css b/client/src/app.css
index 3f9b53a..f7782b4 100644
--- a/client/src/app.css
+++ b/client/src/app.css
@@ -13,11 +13,14 @@
     }
   }
 
+  html,
   body {
     @apply bg-black text-white;
     /* hide scrollbar */
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+
+    overflow: auto; /* or 'scroll' if you always want scrollability */
+    scrollbar-width: none; /* Hide scrollbar for Firefox */
+    -ms-overflow-style: none; /* Hide scrollbar for IE 10+ and Edge */
   }
   body::-webkit-scrollbar {
     display: none;
diff --git a/client/src/lib/Apps/AppContainer.svelte b/client/src/lib/Apps/AppContainer.svelte
index 7e5a533..e26f2ed 100644
--- a/client/src/lib/Apps/AppContainer.svelte
+++ b/client/src/lib/Apps/AppContainer.svelte
@@ -7,21 +7,21 @@
  -->
 
 <script lang="ts">
-  import { onDestroy } from 'svelte'
-  import { fade } from 'svelte/transition'
-  import { infotainmentBootupSequence } from '../Sequences/sequences'
+  import { onDestroy } from "svelte";
+  import { fade } from "svelte/transition";
+  import { infotainmentBootupSequence } from "../Sequences/sequences";
 
-  export let useContainer: boolean = true
+  export let useContainer: boolean = true;
 
   onDestroy(() => {
-    infotainmentBootupSequence()
-  })
+    infotainmentBootupSequence();
+  });
 </script>
 
 <div
   in:fade={{ duration: 150, delay: 150 }}
   out:fade={{ duration: 150 }}
-  class:app-container={useContainer}
+  class:overflow-hidden={true}
   {...$$restProps}
 >
   <slot />