From 6f7361a5dd5686b90b8fc4d2f90a594f4fa61dd4 Mon Sep 17 00:00:00 2001
From: Me <me@Philip.local>
Date: Wed, 30 Nov 2022 23:32:11 +0100
Subject: [PATCH] well i tried a bunch of things to fix the CSS, most did not
 work, will need some help

---
 .../svelte/api_front/public/global.css        |  5 ++
 .../api_front/src/ProfileDisplay.svelte       | 50 ++++++++++++++++---
 .../svelte/api_front/src/SplashPage.svelte    | 19 ++++++-
 .../api_front/src/components/Header.svelte    |  1 +
 4 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/srcs/requirements/svelte/api_front/public/global.css b/srcs/requirements/svelte/api_front/public/global.css
index e5845aa1..b6baa24e 100644
--- a/srcs/requirements/svelte/api_front/public/global.css
+++ b/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 {
diff --git a/srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte b/srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte
index 035a1e7a..9ba1a28c 100644
--- a/srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte
+++ b/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 */
diff --git a/srcs/requirements/svelte/api_front/src/SplashPage.svelte b/srcs/requirements/svelte/api_front/src/SplashPage.svelte
index b943b6aa..08531d3c 100644
--- a/srcs/requirements/svelte/api_front/src/SplashPage.svelte
+++ b/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);
diff --git a/srcs/requirements/svelte/api_front/src/components/Header.svelte b/srcs/requirements/svelte/api_front/src/components/Header.svelte
index dee36e33..41627def 100644
--- a/srcs/requirements/svelte/api_front/src/components/Header.svelte
+++ b/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;
   }