From 8aa2fd3c2d08a2b2dcd3664272e056261fca82b2 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 31 Aug 2022 16:50:45 -0500
Subject: [PATCH 1/4] Testing base dialog at layout level using svelte
 component.

---
 .../components/dialog/DefaultDialog.svelte    | 67 +++++++++++++++
 .../dialog/RemoveCollectionDialog.svelte      | 82 +++++++++++++++++++
 src/lib/stores/boredState.ts                  | 25 ++----
 src/lib/types.ts                              |  9 ++
 src/routes/+layout.svelte                     | 53 ++++++++++++
 src/routes/collection/+page.svelte            | 45 ++--------
 6 files changed, 228 insertions(+), 53 deletions(-)
 create mode 100644 src/lib/components/dialog/DefaultDialog.svelte
 create mode 100644 src/lib/components/dialog/RemoveCollectionDialog.svelte

diff --git a/src/lib/components/dialog/DefaultDialog.svelte b/src/lib/components/dialog/DefaultDialog.svelte
new file mode 100644
index 0000000..262cc03
--- /dev/null
+++ b/src/lib/components/dialog/DefaultDialog.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import {
+    Dialog,
+    DialogDescription,
+    DialogOverlay,
+    DialogTitle
+  } from '@rgossiaux/svelte-headlessui';
+  import { boredState } from '$root/lib/stores/boredState';
+
+  $: isOpen = $boredState?.dialog?.isOpen;
+</script>
+
+<Dialog
+  open={isOpen}
+  on:close={() => {
+    boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } }));
+  }}
+  static
+>
+  <div transition:fade>
+    <DialogOverlay class="dialog-overlay" />
+    <div class="dialog">
+      <DialogTitle>Default Dialog</DialogTitle>
+      <DialogDescription>Dialog Description</DialogDescription>
+
+      <div class="dialog-footer" />
+    </div>
+  </div>
+</Dialog>
+
+<style lang="scss">
+  .dialog {
+    display: grid;
+    gap: 1.5rem;
+    position: absolute;
+    top: 35%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 101;
+    border-radius: 10px;
+    background-color: var(--clr-input-bg);
+    padding: 2rem;
+    min-width: 400px;
+
+    .dialog-footer {
+      display: flex;
+      justify-content: space-between;
+      gap: 2rem;
+      margin: 1rem 0;
+
+      button {
+        display: flex;
+        place-content: center;
+        gap: 1rem;
+        width: 100%;
+        border-radius: 10px;
+        padding: 1rem;
+        background-color: var(--color-btn-primary-active);
+
+        &:hover {
+          background-color: var(--color-btn-primary-active-hover);
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/lib/components/dialog/RemoveCollectionDialog.svelte b/src/lib/components/dialog/RemoveCollectionDialog.svelte
new file mode 100644
index 0000000..234d62b
--- /dev/null
+++ b/src/lib/components/dialog/RemoveCollectionDialog.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import {
+    Dialog,
+    DialogDescription,
+    DialogOverlay,
+    DialogTitle
+  } from '@rgossiaux/svelte-headlessui';
+  import { boredState } from '$root/lib/stores/boredState';
+  import { removeFromCollection } from '$root/lib/util/manipulateCollection';
+
+  function removeGame() {
+    if ($boredState?.dialog?.additionalData) {
+      removeFromCollection($boredState?.dialog?.additionalData);
+    }
+    boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+  }
+
+  $: isOpen = $boredState?.dialog?.isOpen;
+</script>
+
+<Dialog
+  open={isOpen}
+  on:close={() => {
+    boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+  }}
+  static
+>
+  <div transition:fade>
+    <DialogOverlay class="dialog-overlay" />
+    <div class="dialog">
+      <DialogTitle>Remove from collection</DialogTitle>
+      <DialogDescription>Are you sure you want to remove from your collection?</DialogDescription>
+
+      <div class="dialog-footer">
+        <button on:click={removeGame}>Remove</button>
+        <button
+          on:click={() => {
+            boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+          }}>Cancel</button
+        >
+      </div>
+    </div>
+  </div>
+</Dialog>
+
+<style lang="scss">
+  .dialog {
+    display: grid;
+    gap: 1.5rem;
+    position: absolute;
+    top: 35%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 101;
+    border-radius: 10px;
+    background-color: var(--clr-input-bg);
+    padding: 2rem;
+    min-width: 400px;
+
+    .dialog-footer {
+      display: flex;
+      justify-content: space-between;
+      gap: 2rem;
+      margin: 1rem 0;
+
+      button {
+        display: flex;
+        place-content: center;
+        gap: 1rem;
+        width: 100%;
+        border-radius: 10px;
+        padding: 1rem;
+        background-color: var(--color-btn-primary-active);
+
+        &:hover {
+          background-color: var(--color-btn-primary-active-hover);
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/lib/stores/boredState.ts b/src/lib/stores/boredState.ts
index 78f10d3..5824923 100644
--- a/src/lib/stores/boredState.ts
+++ b/src/lib/stores/boredState.ts
@@ -1,26 +1,19 @@
-import type { BoredStore } from '$lib/types';
+import type { BoredStore, Dialog } from '$lib/types';
 import { writable } from 'svelte/store';
+import DefaultDialog from '../components/dialog/DefaultDialog.svelte';
 // import { BoredStore } from '$lib/types';
 
 // Custom store
 const state = () => {
-  const { subscribe, set, update } = writable<BoredStore>({ loading: false });
-
-  // function remove(id: string) {
-  // 	update((store) => {
-  // 		const newStore = store.filter((item: GameType) => item.id !== id);
-  // 		return [...newStore];
-  // 	});
-  // }
-
-  // function removeAll() {
-  // 	update(() => {
-  // 		return [];
-  // 	});
-  // }
+  const initialDialog: Dialog = {
+    isOpen: false,
+    content: DefaultDialog
+  }
+  const initial = { loading: false, dialog: initialDialog }
+  const { subscribe, set, update } = writable<BoredStore>(initial);
 
   function clear() {
-    set({ loading: false });
+    set(initial);
   }
 
   return { subscribe, set, update, clear };
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6944ee8..a4d83dc 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,5 +1,14 @@
+import type { SvelteComponent } from "svelte";
+
+export type Dialog = {
+  isOpen: boolean;
+  content?: typeof SvelteComponent;
+  additionalData?: SavedGameType | GameType;
+}
+
 export type BoredStore = {
   loading: boolean;
+  dialog: Dialog;
 };
 
 export enum ToastType {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d894f0b..d020db2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import { navigating } from '$app/stores';
+  import { fade } from 'svelte/transition';
   import debounce from 'just-debounce-it';
   import { Toy } from '@leveluptuts/svelte-toy';
   import Header from '$lib/components/header/Header.svelte';
@@ -25,6 +26,8 @@
     }
   }
 
+  $: isOpen = $boredState?.dialog?.isOpen;
+
   if (browser) {
     let collectionEmpty = $collectionStore.length === 0 || false;
     console.log('collectionEmpty', collectionEmpty);
@@ -74,6 +77,13 @@
       <div class="background" />
     </Portal>
   {/if}
+  {#if isOpen}
+    <div class="container">
+      <div transition:fade>
+        <svelte:component this={$boredState?.dialog?.content} />
+      </div>
+    </div>
+  {/if}
   <Toast />
 </Transition>
 
@@ -140,4 +150,47 @@
       padding: 40px 0;
     }
   }
+
+  .dialog {
+    display: grid;
+    gap: 1.5rem;
+    position: absolute;
+    top: 35%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 101;
+    border-radius: 10px;
+    background-color: var(--clr-input-bg);
+    padding: 2rem;
+    min-width: 400px;
+
+    .dialog-footer {
+      display: flex;
+      justify-content: space-between;
+      gap: 2rem;
+      margin: 1rem 0;
+
+      button {
+        display: flex;
+        place-content: center;
+        gap: 1rem;
+        width: 100%;
+        border-radius: 10px;
+        padding: 1rem;
+        background-color: var(--color-btn-primary-active);
+
+        &:hover {
+          background-color: var(--color-btn-primary-active-hover);
+        }
+      }
+    }
+  }
+
+  :global(.dialog-overlay) {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background-color: rgb(0 0 0);
+    opacity: 0.8;
+  }
 </style>
diff --git a/src/routes/collection/+page.svelte b/src/routes/collection/+page.svelte
index 113cd0e..2958913 100644
--- a/src/routes/collection/+page.svelte
+++ b/src/routes/collection/+page.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import {
-    Dialog,
-    DialogDescription,
-    DialogOverlay,
-    DialogTitle
-  } from '@rgossiaux/svelte-headlessui';
   import Game from '$lib/components/game/index.svelte';
   import { collectionStore } from '$lib/stores/collectionStore';
   import type { GameType, SavedGameType } from '$root/lib/types';
   import { removeFromCollection } from '$root/lib/util/manipulateCollection';
+  import { boredState } from '$root/lib/stores/boredState';
+  import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
 
   let isOpen: boolean = false;
   let gameToRemove: GameType | SavedGameType;
@@ -22,12 +17,10 @@
   function handleRemoveGame(event: RemoveGameEvent) {
     console.log('event', event);
     gameToRemove = event?.detail;
-    isOpen = true;
-  }
-
-  function removeGame() {
-    removeFromCollection(gameToRemove);
-    isOpen = false;
+    boredState.update((n) => ({
+      ...n,
+      dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
+    }));
   }
 </script>
 
@@ -48,28 +41,6 @@
     {/if}
   </div>
 </div>
-{#if isOpen}
-  <div class="container">
-    <div transition:fade>
-      <Dialog open={isOpen} on:close={() => (isOpen = false)} static>
-        <div transition:fade>
-          <DialogOverlay class="dialog-overlay" />
-          <div class="dialog">
-            <DialogTitle>Remove from collection</DialogTitle>
-            <DialogDescription
-              >Are you sure you want to remove from your collection?</DialogDescription
-            >
-
-            <div class="dialog-footer">
-              <button on:click={() => removeGame()}>Remove</button>
-              <button on:click={() => (isOpen = false)}>Cancel</button>
-            </div>
-          </div>
-        </div>
-      </Dialog>
-    </div>
-  </div>
-{/if}
 
 <style lang="scss">
   h1 {
@@ -94,7 +65,7 @@
     }
   }
 
-  .dialog {
+  /* .dialog {
     display: grid;
     gap: 1.5rem;
     position: absolute;
@@ -135,7 +106,7 @@
     z-index: 100;
     background-color: rgb(0 0 0);
     opacity: 0.8;
-  }
+  } */
 
   /* 
   .container > .button {

From 26d5b2832318304f739fc066fd1a93664cee1376 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 31 Aug 2022 17:05:12 -0500
Subject: [PATCH 2/4] Transition and need to update the game page remove
 button.

---
 src/routes/+layout.svelte | 47 +--------------------------------------
 1 file changed, 1 insertion(+), 46 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d020db2..15b3b46 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -79,9 +79,7 @@
   {/if}
   {#if isOpen}
     <div class="container">
-      <div transition:fade>
-        <svelte:component this={$boredState?.dialog?.content} />
-      </div>
+      <svelte:component this={$boredState?.dialog?.content} />
     </div>
   {/if}
   <Toast />
@@ -150,47 +148,4 @@
       padding: 40px 0;
     }
   }
-
-  .dialog {
-    display: grid;
-    gap: 1.5rem;
-    position: absolute;
-    top: 35%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 101;
-    border-radius: 10px;
-    background-color: var(--clr-input-bg);
-    padding: 2rem;
-    min-width: 400px;
-
-    .dialog-footer {
-      display: flex;
-      justify-content: space-between;
-      gap: 2rem;
-      margin: 1rem 0;
-
-      button {
-        display: flex;
-        place-content: center;
-        gap: 1rem;
-        width: 100%;
-        border-radius: 10px;
-        padding: 1rem;
-        background-color: var(--color-btn-primary-active);
-
-        &:hover {
-          background-color: var(--color-btn-primary-active-hover);
-        }
-      }
-    }
-  }
-
-  :global(.dialog-overlay) {
-    position: fixed;
-    inset: 0;
-    z-index: 100;
-    background-color: rgb(0 0 0);
-    opacity: 0.8;
-  }
 </style>

From 207c93da2835492e5c8cb300270cac47302f2c0c Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 31 Aug 2022 21:32:30 -0500
Subject: [PATCH 3/4] Adding dialog overlay to layout css, removing commented
 css, and updating dialog store on game page remove button click.

---
 src/routes/+layout.svelte          |  8 +++
 src/routes/+page.svelte            | 92 +++---------------------------
 src/routes/collection/+page.svelte | 50 ----------------
 src/routes/game/[id]/+page.svelte  | 20 ++++---
 4 files changed, 30 insertions(+), 140 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 15b3b46..2c5e64f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -148,4 +148,12 @@
       padding: 40px 0;
     }
   }
+
+  :global(.dialog-overlay) {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background-color: rgb(0 0 0);
+    opacity: 0.8;
+  }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d1c55cb..3aae9e4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,19 +1,12 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import {
-    Dialog,
-    DialogDescription,
-    DialogOverlay,
-    DialogTitle
-  } from '@rgossiaux/svelte-headlessui';
+  import type { GameType, SavedGameType } from '$root/lib/types';
+  import { gameStore } from '$lib/stores/gameSearchStore';
+  import { boredState } from '$root/lib/stores/boredState';
+  import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
   import Game from '$lib/components/game/index.svelte';
   import TextSearch from '$lib/components/search/textSearch/index.svelte';
   import RandomSearch from '$lib/components/search/random/index.svelte';
   import Random from '$lib/components/random/index.svelte';
-  import { gameStore } from '$lib/stores/gameSearchStore';
-  import { boredState } from '$root/lib/stores/boredState';
-  import { removeFromCollection } from '$root/lib/util/manipulateCollection';
-  import type { GameType, SavedGameType } from '$root/lib/types';
 
   async function handleSearch(event: SubmitEvent) {
     boredState.update((n) => ({ ...n, loading: true }));
@@ -41,17 +34,15 @@
   function handleRemoveGame(event: RemoveGameEvent) {
     console.log('event', event);
     gameToRemove = event?.detail;
-    isOpen = true;
-  }
-
-  function removeGame() {
-    removeFromCollection(gameToRemove);
-    isOpen = false;
+    boredState.update((n) => ({
+      ...n,
+      dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
+    }));
   }
 </script>
 
 <svelte:head>
-  <title>Bored Game</title>
+  <title>Bored Game | Home</title>
 </svelte:head>
 
 <h1>Search Boardgames!</h1>
@@ -76,28 +67,6 @@
     </div>
   </div>
 {/if}
-{#if isOpen}
-  <div class="container">
-    <div transition:fade>
-      <Dialog open={isOpen} on:close={() => (isOpen = false)} static>
-        <div transition:fade>
-          <DialogOverlay class="dialog-overlay" />
-          <div class="dialog">
-            <DialogTitle>Remove from collection</DialogTitle>
-            <DialogDescription
-              >Are you sure you want to remove from your collection?</DialogDescription
-            >
-
-            <div class="dialog-footer">
-              <button on:click={() => removeGame()}>Remove</button>
-              <button on:click={() => (isOpen = false)}>Cancel</button>
-            </div>
-          </div>
-        </div>
-      </Dialog>
-    </div>
-  </div>
-{/if}
 
 <style lang="scss">
   .games {
@@ -132,47 +101,4 @@
       grid-template-columns: 1fr 1fr;
     }
   }
-
-  .dialog {
-    display: grid;
-    gap: 1.5rem;
-    position: absolute;
-    top: 35%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 101;
-    border-radius: 10px;
-    background-color: var(--clr-input-bg);
-    padding: 2rem;
-    min-width: 400px;
-
-    .dialog-footer {
-      display: flex;
-      justify-content: space-between;
-      gap: 2rem;
-      margin: 1rem 0;
-
-      button {
-        display: flex;
-        place-content: center;
-        gap: 1rem;
-        width: 100%;
-        border-radius: 10px;
-        padding: 1rem;
-        background-color: var(--color-btn-primary-active);
-
-        &:hover {
-          background-color: var(--color-btn-primary-active-hover);
-        }
-      }
-    }
-  }
-
-  :global(.dialog-overlay) {
-    position: fixed;
-    inset: 0;
-    z-index: 100;
-    background-color: rgb(0 0 0);
-    opacity: 0.8;
-  }
 </style>
diff --git a/src/routes/collection/+page.svelte b/src/routes/collection/+page.svelte
index 2958913..a21a0ed 100644
--- a/src/routes/collection/+page.svelte
+++ b/src/routes/collection/+page.svelte
@@ -64,54 +64,4 @@
       grid-template-columns: 1fr;
     }
   }
-
-  /* .dialog {
-    display: grid;
-    gap: 1.5rem;
-    position: absolute;
-    top: 35%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 101;
-    border-radius: 10px;
-    background-color: var(--clr-input-bg);
-    padding: 2rem;
-    min-width: 400px;
-
-    .dialog-footer {
-      display: flex;
-      justify-content: space-between;
-      gap: 2rem;
-      margin: 1rem 0;
-
-      button {
-        display: flex;
-        place-content: center;
-        gap: 1rem;
-        width: 100%;
-        border-radius: 10px;
-        padding: 1rem;
-        background-color: var(--color-btn-primary-active);
-
-        &:hover {
-          background-color: var(--color-btn-primary-active-hover);
-        }
-      }
-    }
-  }
-
-  :global(.dialog-overlay) {
-    position: fixed;
-    inset: 0;
-    z-index: 100;
-    background-color: rgb(0 0 0);
-    opacity: 0.8;
-  } */
-
-  /* 
-  .container > .button {
-    display: grid;
-    justify-content: center;
-    background-color: var(--primary);
-  } */
 </style>
diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/game/[id]/+page.svelte
index 4b6f338..489d9b3 100644
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@@ -1,8 +1,4 @@
 <script lang="ts">
-  // throw new Error(
-  //   '@migration task: Add data prop (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292707)'
-  // );
-
   import { fade } from 'svelte/transition';
   import {
     ExternalLinkIcon,
@@ -11,12 +7,15 @@
     PlusCircleIcon,
     PlusIcon
   } from '@rgossiaux/svelte-heroicons/outline';
-  import { collectionStore } from '$lib/stores/collectionStore';
   import type { GameType, SavedGameType } from '$lib/types';
-  import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
+  import { collectionStore } from '$lib/stores/collectionStore';
+  import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
+  import { addToCollection } from '$lib/util/manipulateCollection';
   import type { PageData } from './$types';
+  import { boredState } from '$root/lib/stores/boredState';
 
   $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
+
   export let data: PageData;
   export let game: GameType = data?.game;
   console.log('page game', game);
@@ -29,6 +28,13 @@
     firstParagraphEnd = game?.description?.indexOf('</ p>') + 5;
   }
   console.log('firstParagraphEnd', firstParagraphEnd);
+
+  function removeGame() {
+    boredState.update((n) => ({
+      ...n,
+      dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: game }
+    }));
+  }
 </script>
 
 <svelte:head>
@@ -59,7 +65,7 @@
       >Board Game Atlas Link <ExternalLinkIcon width="24" height="24" /></a
     >
     {#if existsInCollection}
-      <button class="btn" type="button" on:click={() => removeFromCollection(game)}
+      <button class="btn" type="button" on:click={() => removeGame()}
         >Remove from collection <MinusCircleIcon width="24" height="24" /></button
       >
     {:else}

From bc59d64f7cb9f2051795d9d789049ac116808259 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Thu, 1 Sep 2022 00:17:11 -0500
Subject: [PATCH 4/4] Max height to button, modal gets 50%.

---
 .../components/dialog/RemoveCollectionDialog.svelte   |  2 +-
 src/lib/components/game/index.svelte                  | 11 ++++++-----
 src/routes/collection/+page.svelte                    |  2 +-
 src/routes/game/[id]/+page.svelte                     |  5 +++++
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/dialog/RemoveCollectionDialog.svelte b/src/lib/components/dialog/RemoveCollectionDialog.svelte
index 234d62b..4045308 100644
--- a/src/lib/components/dialog/RemoveCollectionDialog.svelte
+++ b/src/lib/components/dialog/RemoveCollectionDialog.svelte
@@ -49,7 +49,7 @@
     display: grid;
     gap: 1.5rem;
     position: absolute;
-    top: 35%;
+    top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 101;
diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte
index 3bd90b1..4ee00f8 100644
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@@ -73,12 +73,9 @@
     background-color: var(--color-btn-primary-active);
   }
 
-  /* :global(.icon) {
-    width: 24px;
-    height: 24px;
-  } */
-
   .game-container {
+    /* display: grid; */
+    /* grid-template-rows: minmax(25px, 50px) 1fr minmax(50px, 75px); */
     display: flex;
     flex-wrap: wrap;
 
@@ -107,5 +104,9 @@
         padding: 0.25rem;
       }
     }
+
+    .btn {
+      max-height: 50px;
+    }
   }
 </style>
diff --git a/src/routes/collection/+page.svelte b/src/routes/collection/+page.svelte
index a21a0ed..d6d410e 100644
--- a/src/routes/collection/+page.svelte
+++ b/src/routes/collection/+page.svelte
@@ -60,7 +60,7 @@
       grid-template-columns: 1fr 1fr;
     }
 
-    @media (max-width: 650px) {
+    @media (max-width: 550px) {
       grid-template-columns: 1fr;
     }
   }
diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/game/[id]/+page.svelte
index 489d9b3..eb41f3b 100644
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@@ -147,4 +147,9 @@
     gap: 1.5rem;
     margin: 1rem;
   }
+
+  .with-icon {
+    display: flex;
+    place-items: center;
+  }
 </style>