From c4cbceb4e52ce5a1bfb541d36e2cab6c7d046fb5 Mon Sep 17 00:00:00 2001
From: Maarten <maartenzam@gmail.com>
Date: Tue, 15 Oct 2024 09:51:18 +0200
Subject: [PATCH] Fix cards on mobile

---
 src/lib/components/CaseCard.svelte | 5 +----
 src/lib/components/Controls.svelte | 1 +
 src/routes/+page.svelte            | 4 ++--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/CaseCard.svelte b/src/lib/components/CaseCard.svelte
index 4d88557..7eccf9a 100644
--- a/src/lib/components/CaseCard.svelte
+++ b/src/lib/components/CaseCard.svelte
@@ -61,7 +61,6 @@
 
 	<div class="card-image">
 		<figure class="image">
-			<!--img src={`/images/${cardData.attribution_id}.jpg`} /-->
 			<img src={cardData.image_url} />
 		</figure>
 		{#if expanded}
@@ -101,6 +100,7 @@
 			{/if}
 		</div>
 	</div>
+
 	{#if !expanded}
 		<footer class="card-footer">
 			<button on:click={openCase(cardData.attribution_id)} class="card-footer-item"
@@ -111,9 +111,6 @@
 </div>
 
 <style>
-	/*div.card {
-		max-width: 780px;
-	}*/
 	.image-credit {
 		padding: 0px 24px;
 		font-size: 0.8rem;
diff --git a/src/lib/components/Controls.svelte b/src/lib/components/Controls.svelte
index 806a9e7..eb013c7 100644
--- a/src/lib/components/Controls.svelte
+++ b/src/lib/components/Controls.svelte
@@ -145,6 +145,7 @@
 		outline: none;
 		overflow: hidden;
 		transition: all 200ms ease;
+		width: 200px;
 	}
 
 	button.reset-filters:hover {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 914de0c..01b6a06 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -286,10 +286,10 @@
 	<section class="section">
 		<div class="container">
 			<CasesControls bind:displayDataAs bind:selectedSorting></CasesControls>
-			<div class="grid is-col-min-16">
+			<div class="grid is-col-min-12">
 				{#each sortedCases as attrCase}
 					{#if attrCase.show}
-						<div class="cell">
+						<div>
 							<CaseCard cardData={attrCase} expanded={false} bind:modalOpen bind:activeCaseData
 							></CaseCard>
 						</div>