From 3f95e2811abdb091333f3ea81d84f1643bc4546d Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Wed, 17 Jan 2024 20:13:33 +0100
Subject: [PATCH] Improve mobile view

---
 frontend/src/lib/components/card/Card.svelte       | 2 +-
 frontend/src/lib/components/project/Column.svelte  | 3 ++-
 frontend/src/lib/components/project/Project.svelte | 2 +-
 frontend/src/lib/components/project/Sidebar.svelte | 6 +++++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/card/Card.svelte b/frontend/src/lib/components/card/Card.svelte
index 0fc47fe..dd4070a 100644
--- a/frontend/src/lib/components/card/Card.svelte
+++ b/frontend/src/lib/components/card/Card.svelte
@@ -35,7 +35,7 @@
 
 {#if showModal}
 	<ModalCard {card} />
-{:else}{/if}
+{/if}
 
 <style lang="less">
 	.card {
diff --git a/frontend/src/lib/components/project/Column.svelte b/frontend/src/lib/components/project/Column.svelte
index 0fc0cb1..3759970 100644
--- a/frontend/src/lib/components/project/Column.svelte
+++ b/frontend/src/lib/components/project/Column.svelte
@@ -137,10 +137,11 @@
 
 	.column {
 		margin: 20px 10px;
-		width: 250px;
+		flex: 0 0 250px;
 
 		.one-column({
 			scroll-snap-align: center;
+			flex-basis: 80vw;
 		});
 	}
 
diff --git a/frontend/src/lib/components/project/Project.svelte b/frontend/src/lib/components/project/Project.svelte
index 7cbc68b..026ac6a 100644
--- a/frontend/src/lib/components/project/Project.svelte
+++ b/frontend/src/lib/components/project/Project.svelte
@@ -126,7 +126,7 @@
 		scroll-snap-type: x mandatory;
 
 		.one-column({
-			padding-left: calc(50vw - (250px / 2));
+			padding: 0 10%;
 		});
 	}
 </style>
diff --git a/frontend/src/lib/components/project/Sidebar.svelte b/frontend/src/lib/components/project/Sidebar.svelte
index eca2469..9cf987d 100644
--- a/frontend/src/lib/components/project/Sidebar.svelte
+++ b/frontend/src/lib/components/project/Sidebar.svelte
@@ -56,12 +56,16 @@
 					{#each $views as view}
 						<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 						<li
-							on:click={() => currentView.set(view)}
+							on:click={() => {
+								currentView.set(view);
+								isVisible = false;
+							}}
 							role="button"
 							tabindex="0"
 							on:keydown={(e) => {
 								if (e.key === 'Enter') {
 									currentView.set(view);
+									isVisible = false;
 								}
 							}}
 							class:active={$currentView === view}