From f9878d1e4871ac510de9ca618981e4cfa2072ad9 Mon Sep 17 00:00:00 2001
From: Caspar Jojo Asaam <caspar@dyn3159-95.wlan.ic.ac.uk>
Date: Thu, 5 Jun 2025 11:16:31 +0100
Subject: [PATCH 1/5] feat: adjusted the cards such that it's only one column
 for very small widths and the cards resize for smaller widths

Co-Authored-By: Tadios Temesgen <tt2022@ic.ac.uk>
---
 src/lib/components/Navbar.svelte    |  2 ++
 src/lib/components/SpaceCard.svelte |  5 ++++-
 src/routes/+page.svelte             | 11 ++++++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index baed206..3247f74 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -24,6 +24,7 @@
         height: 4rem;
         top: 0;
         left: 0;
+        right: 0;
         background: linear-gradient(-77deg, #2e4653, #3a5b56);
         box-shadow: 0rem 0rem 0.5rem #182125;
         align-items: center;
@@ -33,6 +34,7 @@
         display: block;
         height: 100%;
     }
+
     .logo img {
         height: 100%;
     }
diff --git a/src/lib/components/SpaceCard.svelte b/src/lib/components/SpaceCard.svelte
index f6d7e9b..3a57454 100644
--- a/src/lib/components/SpaceCard.svelte
+++ b/src/lib/components/SpaceCard.svelte
@@ -25,6 +25,8 @@
         display: flex;
         flex-direction: column;
         background-color: #49bd85;
+        width: 100%;
+        max-width: 20rem;
     }
     .description {
         padding: 0.5rem;
@@ -32,7 +34,8 @@
         font-size: 0.875rem;
     }
     img {
-        width: 16rem;
+        width: 100%;
+        height: auto;
         aspect-ratio: 1 / 1;
     }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fe519b2..3d178ff 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -41,13 +41,22 @@
 <style>
     main {
         display: grid;
+        box-sizing: border-box;
         grid-template-columns: 1fr 1fr;
         gap: 1rem;
         padding: 1rem;
-        width: min(600px, 100vw);
+        max-width: 600px;
+        width: 100%;
+        margin: 0 auto;
     }
 
     .new-space {
         transform: rotate(45deg);
     }
+
+    @media (max-width: 20rem) {
+        main {
+            grid-template-columns: 1fr;
+        }
+    }
 </style>

From 1d1bd940bf2867c428f4c6fb8c73913b06046eb3 Mon Sep 17 00:00:00 2001
From: Caspar Jojo Asaam <caspar@dyn3159-95.wlan.ic.ac.uk>
Date: Thu, 5 Jun 2025 11:25:02 +0100
Subject: [PATCH 2/5] feat: Added rounded corners and removed blue underlining

Co-Authored-By: Tadios Temesgen <tt2022@ic.ac.uk>
---
 src/lib/components/SpaceCard.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/components/SpaceCard.svelte b/src/lib/components/SpaceCard.svelte
index 3a57454..080d618 100644
--- a/src/lib/components/SpaceCard.svelte
+++ b/src/lib/components/SpaceCard.svelte
@@ -27,6 +27,9 @@
         background-color: #49bd85;
         width: 100%;
         max-width: 20rem;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        text-decoration: none;
     }
     .description {
         padding: 0.5rem;

From 6e72580a6af942c19d3919dde250b50cfa6c1b47 Mon Sep 17 00:00:00 2001
From: Caspar Jojo Asaam <caspar@dyn3159-95.wlan.ic.ac.uk>
Date: Thu, 5 Jun 2025 11:43:04 +0100
Subject: [PATCH 3/5] refactor: allowed for SpaceCard.svelte to take in
 study_spaces Table instead of Snippets

Co-Authored-By: Tadios Temesgen <tt2022@ic.ac.uk>
---
 src/lib/components/SpaceCard.svelte | 11 +++++------
 src/routes/+page.svelte             | 11 ++---------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/SpaceCard.svelte b/src/lib/components/SpaceCard.svelte
index 080d618..22ba1a9 100644
--- a/src/lib/components/SpaceCard.svelte
+++ b/src/lib/components/SpaceCard.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    import type { Table } from "@supabase/supabase-js";
 
     interface Props {
+        space: Table<"study_spaces">;
         alt: string;
         imgSrc: string;
-        title?: Snippet;
-        description?: Snippet;
         href?: string;
     }
 
-    const { alt, imgSrc, title, description, href }: Props = $props();
+    const { space, alt, imgSrc, href }: Props = $props();
 </script>
 
 <a class="card" {href}>
     <img src={imgSrc} {alt} />
     <div class="description">
-        {@render title?.()}
-        {@render description?.()}
+        <h1>{space.location}</h1>
+        <p>{space.description}</p>
     </div>
 </a>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3d178ff..6e717f7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -26,15 +26,8 @@
             alt="Photo of {studySpace.description}"
             href="/space/{studySpace.id}"
             imgSrc={imgUrl}
-        >
-            {#snippet title()}
-                <h1>{studySpace.location}</h1>
-            {/snippet}
-
-            {#snippet description()}
-                <p>{studySpace.description}</p>
-            {/snippet}
-        </SpaceCard>
+            space={studySpace}
+        />
     {/each}
 </main>
 

From f85adf9edc4ea6b42e07c972fcf09febeac606b3 Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Thu, 5 Jun 2025 11:53:03 +0100
Subject: [PATCH 4/5] fix: remove navbar overflow on main page

---
 src/lib/components/Navbar.svelte    | 1 +
 src/lib/components/SpaceCard.svelte | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 3247f74..ff8bd72 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -28,6 +28,7 @@
         background: linear-gradient(-77deg, #2e4653, #3a5b56);
         box-shadow: 0rem 0rem 0.5rem #182125;
         align-items: center;
+        overflow: hidden;
     }
 
     .logo {
diff --git a/src/lib/components/SpaceCard.svelte b/src/lib/components/SpaceCard.svelte
index 22ba1a9..bc9feb0 100644
--- a/src/lib/components/SpaceCard.svelte
+++ b/src/lib/components/SpaceCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { Table } from "@supabase/supabase-js";
+    import type { Table } from "$lib";
 
     interface Props {
         space: Table<"study_spaces">;

From 11a040a6775422fe7b25508aa916a9841a36f49a Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Thu, 5 Jun 2025 11:54:37 +0100
Subject: [PATCH 5/5] fix: don't stretch image in spacecard

---
 src/lib/components/SpaceCard.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/SpaceCard.svelte b/src/lib/components/SpaceCard.svelte
index bc9feb0..076eded 100644
--- a/src/lib/components/SpaceCard.svelte
+++ b/src/lib/components/SpaceCard.svelte
@@ -39,5 +39,6 @@
         width: 100%;
         height: auto;
         aspect-ratio: 1 / 1;
+        object-fit: cover;
     }
 </style>