fix: corrected scrollbar styles to have proper spacing

src/components/core/GridImage.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { AppController } from "@controllers";
-    import { TriangleExclamation } from "@icons";
-    import { gridType } from "@stores/AppState";
-    import { IMAGE_FADE_OPTIONS, SMALL_GRID_DIMENSIONS } from "@utils";
-    import Lazy from "svelte-lazy";
+  import { AppController } from "@controllers";
+  import { TriangleExclamation } from "@icons";
+  import { gridType } from "@stores/AppState";
+  import { IMAGE_FADE_OPTIONS, SMALL_GRID_DIMENSIONS } from "@utils";
+  import Lazy from "svelte-lazy";
 
   export let imagePath: string;
   export let altText: string;

src/components/core/filters/Options.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import { LogController } from "@controllers";
-  import { scrollShadow } from "@directives";
+  import { isOverflowing, scrollShadow } from "@directives";
   import { Toggle } from "@interactables";
   import { Accordion } from "@layout";
   import { dbFilters, gridType, optionsSize, theme } from "@stores/AppState";
   import { Pane } from "svelte-splitpanes";
   import Divider from "../Divider.svelte";
   import SectionTitle from "../SectionTitle.svelte";
 
+  let overflowing = false;
+
   /**
    * Creates a function to update the specified filter.
    * @param section The section of the filter to update.
@@ -64,8 +66,8 @@
     </div>
 
     <div class="content" style="height: calc(100% - 85px);">
-      <div class="scroll-container" use:scrollShadow={{ background: "red"}}>
-        <div class="wrapper">
+      <div class="scroll-container" use:scrollShadow={{ background: "red"}} use:isOverflowing={{ callback: (o) => overflowing = o }}>
+        <div class="wrapper" style:width={overflowing ? "calc(100% - 7px)" : "100%"}>
           {#each Object.keys($dbFilters[$gridType]) as section}
             <Accordion
               label="{section === "oneoftag" ? "Tags" : toUpperCaseSplit(section)}"
@@ -103,7 +105,6 @@
     max-height: calc(100% - 65px)
   }
   .wrapper {
-    width: 100%;
     display: flex;
     flex-direction: column;
     gap: 7px;

src/components/modals/ToolsModal.svelte

@@ -76,7 +76,7 @@
   <div class="content">
     {#each toolsList as tool}
       <IconButton label={tool.name} on:click={tool.onClick} height="auto" width="auto" tooltipPosition="bottom">
-        <svelte:component this={tool.icon} style="height: 18px; width: 18px; padding: 24px;" />
+        <svelte:component this={tool.icon} style="height: 18px; width: 18px; padding: 28px;" />
       </IconButton>
     {/each}
   </div>
@@ -93,9 +93,5 @@
 
 
     padding-top: 14px;
-
-    
-		/* max-height: 73vh; */
-    overflow-y: scroll;
 	}
 </style>

src/components/modals/game-search/GameSearchEntry.svelte

@@ -21,7 +21,6 @@
     height: 20px;
     
     padding: 3px 7px;
-    margin-bottom: 7px;
 
     border-radius: 4px;
 

src/components/modals/game-search/GameSearchModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { AppController, LogController, ToastController } from "@controllers";
-  import { scrollShadow } from "@directives";
+  import { isOverflowing, scrollShadow } from "@directives";
   import { Refresh } from "@icons";
   import { Button, IconButton, SearchBar } from "@interactables";
   import { selectedGameName } from "@stores/AppState";
@@ -12,6 +12,7 @@
   import GameSearchEntry from "./GameSearchEntry.svelte";
 
   let open = true;
+  let overflowing = false;
   let loading = true;
   let requestTimedOut = false;
   let searchQuery = $gameSearchModalDefault;
@@ -93,18 +94,20 @@
         <SearchBar label="Game Search" bind:value={searchQuery} onChange={async (query) => await makeRequest(query)} width="250px" reversed />
       </div>
       <div class="container">
-        <div class="scroll-container" use:scrollShadow={{ background: "--background" }}>
-          {#if loading}
-            {#each new Array(10) as _}
-              <EntryLoadingSkeleton />
-            {/each}
-          {:else if requestTimedOut}
-            <div>Request timed out. Check your internet connection or click retry.</div>
-          {:else}
-            {#each results as sgdbGame (sgdbGame.id)}
-              <GameSearchEntry game={sgdbGame} isSelected={selectedGame ? sgdbGame.id === selectedGame.id : sgdbGame.name === $selectedGameName} onSelect={setSelected} />
-            {/each}
-          {/if}
+        <div class="scroll-container" use:scrollShadow={{ background: "--background" }} use:isOverflowing={{ callback: (o) => overflowing = o }}>
+          <div class="wrapper" style:width={overflowing ? "calc(100% - 7px)" : "100%"}>
+            {#if loading}
+              {#each new Array(10) as _}
+                <EntryLoadingSkeleton />
+              {/each}
+            {:else if requestTimedOut}
+              <div>Request timed out. Check your internet connection or click retry.</div>
+            {:else}
+              {#each results as sgdbGame (sgdbGame.id)}
+                <GameSearchEntry game={sgdbGame} isSelected={selectedGame ? sgdbGame.id === selectedGame.id : sgdbGame.name === $selectedGameName} onSelect={setSelected} />
+              {/each}
+            {/if}
+          </div>
         </div>
       </div>
     </div>
@@ -164,6 +167,12 @@
     margin-bottom: 7px;
   }
 
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+  }
+
   .buttons {
     width: 100%;
     display: flex;

src/components/modals/settings/SettingsModal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { AppController, DialogController, LogController, ToastController } from "@controllers";
+  import { isOverflowing } from "@directives";
   import { Folder } from "@icons";
   import { Button, IconButton } from "@interactables";
   import { activeUserId, debugMode, loadingGames, needsSGDBAPIKey, needsSteamKey, steamGridDBKey, steamInstallPath, steamKey, steamUsers } from "@stores/AppState";
@@ -19,6 +20,7 @@
 	let usersUnsub: Unsubscriber;
 
   let open = true;
+  let overflowing = false;
   let steamApiKeyChanged = false;
 
   /**
@@ -193,48 +195,52 @@
 
 <ModalBody title={"Settings"} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
-    <FilePathEntry
-      label="Steam Install Path"
-      description={"The root of your Steam installation. The default on Windows is <b>C:/Program Files (x86)/Steam</b> and <b>/home/deck/.steam/steam</b> on Linux. You must restart after changing this."}
-      value={steamInstallLocation}
-      onChange={onInstallLocationChange}
-      useValidator
-      validPathMessage={"Path is a valid Steam install"}
-      validator={validateSteamPath}
-      required
-    />
-    <TextFieldEntry
-      label="SteamGrid Api Key"
-      description={"Needed to load art from SteamGridDB.com. To create one, go to <a href=\"https://www.steamgriddb.com\">Steamgrid</a>, sign in and go to preferences, then API."}
-      value={steamGridKey}
-      onChange={onGridKeyChange}
-      useValidator
-      validator={validateSGDBAPIKey}
-      required
-    />
-    <TextFieldEntry
-      label="Steam Api key"
-      description={"Used to load your games using Steam's web API (It's much faster). To create one, go to Steam's <a href=\"https://steamcommunity.com/dev/apikey\">key registration</a> page, sign in and create an api key."}
-      notes={"Recommended for large libraries. It does <b>NOT</b> matter what domain you put in, It just needs to be a valid url. When in doubt do \"http://YOUR_STEAM_USERNAME.com\"."}
-      value={steamAPIKey}
-      canBeEmpty
-      onChange={onSteamKeyChange}
-      useValidator
-      validator={validateSteamAPIKey}
-    />
-    <DropdownEntry
-      label="Steam User"
-      description="Determines which Steam account to edit grids for."
-      options={(users && users.length > 0) ? users : [ { label: "Loading...", data: "placeholder" } ]}
-      value={(users && users.length > 0) ? selectedUserId : "placeholder"}
-      onChange={(id) => {selectedUserId = id; canSave = true;}}
-    />
-    <ToggleFieldEntry
-      label="Debug Mode"
-      description={"Enables the inspect element window and automatically opens it on launch."}
-      value={debugModeSetting}
-      onChange={onDebugModeChange}
-    />
+    <div class="scroll-container" use:isOverflowing={{ callback: (o) => overflowing = o }}>
+      <div class="wrapper" style:width={overflowing ? "calc(100% - 7px)" : "100%"}>
+        <FilePathEntry
+          label="Steam Install Path"
+          description={"The root of your Steam installation. The default on Windows is <b>C:/Program Files (x86)/Steam</b> and <b>/home/deck/.steam/steam</b> on Linux. You must restart after changing this."}
+          value={steamInstallLocation}
+          onChange={onInstallLocationChange}
+          useValidator
+          validPathMessage={"Path is a valid Steam install"}
+          validator={validateSteamPath}
+          required
+        />
+        <TextFieldEntry
+          label="SteamGrid Api Key"
+          description={"Needed to load art from SteamGridDB.com. To create one, go to <a href=\"https://www.steamgriddb.com\">Steamgrid</a>, sign in and go to preferences, then API."}
+          value={steamGridKey}
+          onChange={onGridKeyChange}
+          useValidator
+          validator={validateSGDBAPIKey}
+          required
+        />
+        <TextFieldEntry
+          label="Steam Api key"
+          description={"Used to load your games using Steam's web API (It's much faster). To create one, go to Steam's <a href=\"https://steamcommunity.com/dev/apikey\">key registration</a> page, sign in and create an api key."}
+          notes={"Recommended for large libraries. It does <b>NOT</b> matter what domain you put in, It just needs to be a valid url. When in doubt do \"http://YOUR_STEAM_USERNAME.com\"."}
+          value={steamAPIKey}
+          canBeEmpty
+          onChange={onSteamKeyChange}
+          useValidator
+          validator={validateSteamAPIKey}
+        />
+        <DropdownEntry
+          label="Steam User"
+          description="Determines which Steam account to edit grids for."
+          options={(users && users.length > 0) ? users : [ { label: "Loading...", data: "placeholder" } ]}
+          value={(users && users.length > 0) ? selectedUserId : "placeholder"}
+          onChange={(id) => {selectedUserId = id; canSave = true;}}
+        />
+        <ToggleFieldEntry
+          label="Debug Mode"
+          description={"Enables the inspect element window and automatically opens it on launch."}
+          value={debugModeSetting}
+          onChange={onDebugModeChange}
+        />
+      </div>
+    </div>
   </div>
 
   <span slot="buttons" class="buttons">
@@ -249,18 +255,24 @@
 <style>
   .content {
 		width: 600px;
-
-		display: flex;
-		flex-direction: column;
-		align-items: center;
     padding-top: 14px;
-
-    gap: 14px;
     
 		max-height: 73vh;
-    overflow-y: scroll;
 	}
 
+  .scroll-container {
+    max-height: calc(73vh - 14px);
+    width: 100%;
+
+    overflow-y: scroll;
+  }
+  
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
   .buttons {
     width: 100%;
     display: flex;

src/lib/directives/IsOverflowing.ts

@@ -0,0 +1,50 @@
+import type { Action } from "svelte/action";
+import { writable } from "svelte/store";
+
+type IsOverflowingParams = {
+  callback: (isOverflowing: boolean) => void;
+}
+
+/**
+ * A Svelte directive for detecting when an element is overflowing..
+ */
+export const isOverflowing: Action<HTMLElement, IsOverflowingParams | undefined> = (node: HTMLElement, props = { callback: (isOverflowing: boolean) => {} }) => {
+  let callback = props.callback;
+
+  const isOverflowing = writable(false);
+  const isOverflowingUnsub = isOverflowing.subscribe((isOverflowing: boolean) => {
+    callback(isOverflowing);
+  });
+
+  const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+    const element = entries[0].target;
+
+    const overflowingTop = element.scrollTop !== 0;
+    const overflowingBottom = Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) > 0;
+    isOverflowing.set(overflowingTop || overflowingBottom);
+  });
+
+  node.addEventListener("scroll", scrollHandler);
+  observer.observe(node);
+
+
+  function scrollHandler(e: Event) {
+    const element = e.currentTarget as HTMLDivElement;
+
+    const overflowingTop = element.scrollTop !== 0;
+    const overflowingBottom = Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) > 0;
+    isOverflowing.set(overflowingTop || overflowingBottom);
+  }
+
+  return {
+    update(props = { callback: (isOverflowing: boolean) => {} }) {
+      callback = props.callback;
+    },
+    destroy() {
+      node.removeEventListener("scroll", scrollHandler);
+      observer.disconnect();
+
+      isOverflowingUnsub();
+    }
+  }
+}

src/lib/directives/index.ts

@@ -1 +1,3 @@
+export * from "./IsOverflowing";
 export * from "./ScrollShadow";
+