fix: numbers no longer look like ass

package.json

@@ -27,6 +27,7 @@
     "@petamoriken/float16": "^3.7.1",
     "@tauri-apps/api": "^1.2.0",
     "@zerodevx/svelte-toast": "^0.8.0",
+    "markdown-it": "^13.0.1",
     "svelte-lazy": "^1.2.1",
     "svelte-splitpanes": "^0.7.13",
     "svelte-tippy": "^1.3.2",
@@ -38,6 +39,7 @@
     "@sveltejs/vite-plugin-svelte": "^2.0.0",
     "@tauri-apps/cli": "^1.2.2",
     "@tsconfig/svelte": "^3.0.0",
+    "@types/markdown-it": "^12.2.3",
     "@types/node": "^18.7.10",
     "husky": "^8.0.3",
     "svelte": "^3.54.0",

src/components/toast-modals/GridPreviewModal.svelte

@@ -21,9 +21,17 @@
   import VerticalSpacer from "../spacers/VerticalSpacer.svelte";
   import Button from "../interactables/Button.svelte";
   import { AppController } from "../../lib/controllers/AppController";
+  
+  import MarkDownIt from "markdown-it";
+    import { open } from "@tauri-apps/api/shell";
 
   export let show: boolean = false;
   export let onClose: () => void;
+
+  const mdIt = new MarkDownIt({ //try "commonmark"
+    html: true,
+    linkify: true
+  });
   
   $: games = [...$steamGames, ...$nonSteamGames];
 
@@ -46,11 +54,31 @@
   function applyGrid() {
     AppController.setSteamGridArt($gridModalInfo.id, $gridModalInfo.url);
   }
+
+  /**
+   * Handles click events to redirect to the browser.
+   * @param e The click event.
+   */
+  function clickListener(e: Event) {
+    const origin = (e.target as Element).closest(`a`);
+  
+    if (origin) {
+      e.preventDefault();
+      const href = origin.href;
+      open(href);
+    }
+  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="background" class:show on:click={onClose}>
   <div class="modal-body" on:click|stopPropagation>
+    <div class="close-btn" on:click={onClose}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+        <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+        <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
+      </svg>
+    </div>
     <div class="header">{games.find((game) => game.appid == $selectedGameAppId)?.name} - {$gridType} #{$gridModalInfo?.id}</div>
     <div class="border" />
     <div class="content {$gridType.split(" ").join("-").toLowerCase()}">
@@ -78,7 +106,7 @@
             <div class="label">Notes:</div>
             <div class="border" />
             <VerticalSpacer />
-            <div class="notes">{$gridModalInfo?.notes}</div>
+            <div class="notes" on:click={clickListener}>{@html mdIt.render($gridModalInfo?.notes)}</div>
           {:else}
             <div class="border" />
           {/if}
@@ -110,13 +138,37 @@
     border-bottom: 1px solid var(--foreground);
   }
 
+  .close-btn {
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    fill: var(--font-color);
+
+    top: 4px;
+    right: 4px;
+
+    background-color: var(--background);
+    padding: 3px;
+    border-radius: 2px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .close-btn:hover {
+    cursor: pointer;
+    background-color: var(--background-hover);
+  }
+
   .show { display: flex; }
 
   .modal-body {
     margin: auto;
     background-color: var(--background);
     border-radius: 2px;
     border: 1px solid var(--shadow); /* consider removing this */
+    position: relative;
   }
 
   .header {
@@ -164,6 +216,7 @@
     display: flex;
     flex-direction: row;
     height: calc(100% - 38px);
+    max-width: 550px;
   }
   .icon .info {
     margin-top: 10px;