well i tried a bunch of things to fix the CSS, most did not work, will need some help

srcs/requirements/svelte/api_front/public/global.css

@@ -12,6 +12,11 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	/* tmp? */
 	background: bisque;
+
+	/* overflow-x: hidden; */
+	/* This seems to have fixed my pages that are too long */
+	/* but now i can't scroll anywhere ... */
+	/* overflow-y: hidden; */
 }
 
 a {

srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte

@@ -46,13 +46,17 @@
   const rand = (min, max) => 
     Math.floor(Math.random() * (max - min + 1)) + min;
 
-  const animate = star => {
-    star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
-    star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
+  // it's unhappy that "star" isn't typeset, no idea what to do about it...
+  const animate = (star) => {
+    // the if seems to have fixed the type issue
+    if (star) {
+      star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
+      star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
 
-    star.style.animation = "none";
-    star.offsetHeight;
-    star.style.animation = "";
+      star.style.animation = "none";
+      star.offsetHeight;
+      star.style.animation = "";
+    }
   }
 
   // This is the part i invented, it was kinda a fucking nightmare...
@@ -105,6 +109,40 @@
 </main>
 {/if}
 
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+<div>testing when there's tons of stuff</div>
+
+
+
+
 <style>
 
 /* The main part */

srcs/requirements/svelte/api_front/src/SplashPage.svelte

@@ -73,11 +73,24 @@
 
 <Canvas/>
 
-
+<!-- doesn't work :( -->
+<!-- <svelte:body style="overflow-y: hidden"/> -->
 
 <style>
 
-  /* .canvas .grid-container{ */
+  /* :global(body) {
+    overflow-y: hidden;
+  } */
+
+
+  header {
+    /* didn't work... */
+    overflow-y: hidden;
+  }
+
+
+  /* The actually important stuff */
+
   .grid-container{
     position: absolute;
     left: 0;
@@ -86,11 +99,13 @@
     box-sizing: border-box;
     width: 100%;
     height: 100%;
+    /* max-height: 100%; */
     white-space: nowrap;
     /* padding-bottom: 0; */
     margin-bottom: 0px;
     overflow: hidden;
     padding: 20px 40px;
+    margin: 0px;
 
     display: grid;
     grid-template-columns: repeat(12, 1fr);

srcs/requirements/svelte/api_front/src/components/Header.svelte

@@ -73,6 +73,7 @@
   header{
     /* for some reason this doesn't do shit! */
     position: sticky;
+    /* position: absolute; */
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
   }