From 3190519f65eb9fb214c4551d1daba45f588ecef5 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Wed, 20 Mar 2024 10:16:29 +0100
Subject: [PATCH] first responsive layer

---
 src/assets/css/components/game/Score.scss |  6 +--
 src/assets/css/components/ui/Modal.scss   | 47 ++++++++++++++++++-----
 2 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/assets/css/components/game/Score.scss b/src/assets/css/components/game/Score.scss
index 700fbbd..27661c5 100644
--- a/src/assets/css/components/game/Score.scss
+++ b/src/assets/css/components/game/Score.scss
@@ -2,9 +2,9 @@
 	@apply absolute bottom-4 left-4 z-10;
 
 	.answers-visualiser {
-		@apply flex gap-4 p-0 m-0;
+		@apply flex flex-col md:flex-row gap-4 p-0 m-0;
 		.answer {
-			@apply bg-white shrink-0 h-16 w-16 list-none relative flex items-center justify-center;
+			@apply bg-white shrink-0 h-12 md:h-16  list-none relative flex items-center justify-center;
 			aspect-ratio: 1;
 			width: auto;
 			z-index: -2;
@@ -24,8 +24,6 @@
 				transform: translate(-50%, -50%);
 			}
 
-	
-
 			&__behaviour-type-icon {
 				width: 70%;
 				height: 70%;
diff --git a/src/assets/css/components/ui/Modal.scss b/src/assets/css/components/ui/Modal.scss
index 14d3f4c..76ee7d7 100644
--- a/src/assets/css/components/ui/Modal.scss
+++ b/src/assets/css/components/ui/Modal.scss
@@ -13,8 +13,19 @@ dialog {
 
 	overflow-y: scroll;
 	overflow-x: hidden;
-	max-width: 80vw;
-	max-height: 90dvh;
+
+	max-width: 100vw;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	max-height: 100vh;
+
+	@screen md {
+		@apply m-auto;
+
+		max-width: 80vw;
+		max-height: 90dvh;
+	}
 }
 
 .game-modal {
@@ -24,16 +35,25 @@ dialog {
 			@apply w-6 h-6;
 		}
 	}
-	overflow: visible;
+	overflow: scroll;
 }
 
 .modal-content-container {
 	@apply w-full
-	p-8 px-24 grid  gap-x-8;
-	@apply pt-28 pb-16;
+		
+	 grid  
+	 gap-x-8
+
+	 md:grid-cols-2
+	 p-8 
+	 md:px-24
+	 pt-6
+	 md:pt-28
+	 pb-16;
 
 	box-sizing: border-box;
-	grid-template-columns: 1fr 1fr;
+
+	// grid-template-columns: 1fr 1fr;
 
 	&__background {
 		@apply h-full w-full absolute top-0 left-0 object-fill;
@@ -52,12 +72,21 @@ dialog {
 	&__content {
 	}
 	&__cover {
-		@apply px-6 py-12 bg-neutral-50;
+		@apply px-6 py-8 md:py-12 bg-neutral-50;
 		align-self: center;
 		box-sizing: border-box;
+		order: -1;
+
+		@screen md {
+			order: unset;
+		}
+		img,
+		svg {
+			@apply max-h-56;
+		}
 		img {
-			@apply max-h-96;
-			@apply block w-full h-auto object-contain object-center;
+			@apply md:max-h-96
+			block w-full h-auto object-contain object-center;
 		}
 	}
 }