Large screen max width, button styles.

src/lib/components/header/Header.svelte

@@ -25,7 +25,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 var(--containerPadding);
+    padding: var(--containerPadding);
     font-size: 1.6rem;
 
     @media (max-width: 1000px) {

src/lib/components/random/index.svelte

@@ -14,7 +14,7 @@
         const randomGame: SavedGameType = $collectionStore.at(randomNumber)!;
         const response = await fetch(`/api/game/${randomGame?.id}`, {
           method: 'GET',
-          headers: { accept: 'application/json' },
+          headers: { accept: 'application/json' }
         });
         const responseData = await response.json();
         console.log('responseData', responseData);
@@ -37,3 +37,10 @@
 <button class="btn" type="button" on:click={() => getRandomCollectionGame()}
   >Random from collection 🎲</button
 >
+
+<style lang="scss">
+  button {
+    max-width: 450px;
+    padding: var(--spacing-8) var(--spacing-16);
+  }
+</style>

src/lib/components/search/random/index.svelte

@@ -35,4 +35,9 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
+
+  button {
+    max-width: 450px;
+    padding: var(--spacing-8) var(--spacing-16);
+  }
 </style>

src/routes/__layout.svelte

@@ -15,24 +15,21 @@
   import '$root/styles/styles.scss';
 
   $: {
-		if ($navigating) {
-      debounce(() => {boredState.set({ loading: true });}, 250);
-		}
-		if (!$navigating) {
-			boredState.set({ loading: false });
-		}
-	}
+    if ($navigating) {
+      debounce(() => {
+        boredState.set({ loading: true });
+      }, 250);
+    }
+    if (!$navigating) {
+      boredState.set({ loading: false });
+    }
+  }
 
   if (browser) {
     let collectionEmpty = $collectionStore.length === 0 || false;
     console.log('collectionEmpty', collectionEmpty);
     console.log('localStorage.collection', localStorage.collection);
-    if (
-      collectionEmpty &&
-      localStorage &&
-      localStorage.collection &&
-      localStorage.collection.length !== 0
-    ) {
+    if (collectionEmpty && localStorage?.collection && localStorage.collection.length !== 0) {
       const collection = JSON.parse(localStorage.collection);
       console.log('collection', collection);
       if (collection && collection.length !== 0) {
@@ -120,9 +117,9 @@
     padding: 2rem 0rem;
     max-width: 80%;
 
-    /* @media (max-width: 850px) {
-      max-width: 80%;
-    } */
+    @media (min-width: 1500px) {
+      max-width: 60%;
+    }
     box-sizing: border-box;
   }
 

src/routes/index.svelte

@@ -123,7 +123,13 @@
   }
 
   .random-buttons {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
+    place-content: space-between;
+    place-items: center;
+
+    @media (max-width: 650px) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+    }
   }
 </style>