From 2f2f87563957a2fd64521c34761f83689e54ac7a Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Thu, 1 Dec 2022 10:47:46 +0100
Subject: [PATCH 1/2] css: align wcs form buttons on mobile (#71917)

---
 static/caen/_custom.scss          |  4 ----
 static/includes/_forms.scss       | 13 +++++++++++++
 static/miribel/_custom.scss       | 12 ++----------
 static/toulouse-2022/_custom.scss | 22 ----------------------
 4 files changed, 15 insertions(+), 36 deletions(-)

diff --git a/static/caen/_custom.scss b/static/caen/_custom.scss
index 4a95301a..3d088645 100644
--- a/static/caen/_custom.scss
+++ b/static/caen/_custom.scss
@@ -634,10 +634,6 @@ div.gru-content .previous-button button {
 		div {
 			display: block;
 		}
-		button {
-			width: 100%;
-			margin: 0;
-		}
 	}
 }
 
diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index 94d6ae38..7b5b4349 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -657,6 +657,7 @@ div.select2-search {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: $buttons-alignment;
+		margin-right: -1.5em;
 
 		@each $btn, $grow in $buttons-order {
 			$i: index($buttons-order, $btn);
@@ -675,6 +676,18 @@ div.select2-search {
 		.savedraft-button {
 			display: none;
 		}
+		// mobile: grow buttons.
+		@media (max-width: $very-small-limit) {
+			.widget {
+				flex-grow: 1;
+			}
+			.content {
+				display: flex;
+			}
+			button {
+				flex-grow: 1;
+			}
+		}
 	}
 }
 
diff --git a/static/miribel/_custom.scss b/static/miribel/_custom.scss
index ac46c340..cd7d330f 100644
--- a/static/miribel/_custom.scss
+++ b/static/miribel/_custom.scss
@@ -504,16 +504,8 @@ div#rub_service {
 
 @media (max-width: $very-small-limit) {
 	.form-content--body .buttons {
-		column-gap: 1.5rem;
-		> * {
-			flex: 1 0 30%;
-			.content, .content button {
-				width: 100%;
-				margin-right: 0;
-			}
-			&.submit-button {
-				flex-basis: 100%;
-			}
+		.submit-button {
+			flex-basis: 100%;
 		}
 	}
 }
diff --git a/static/toulouse-2022/_custom.scss b/static/toulouse-2022/_custom.scss
index 2c05d1bb..7fc6612d 100644
--- a/static/toulouse-2022/_custom.scss
+++ b/static/toulouse-2022/_custom.scss
@@ -104,28 +104,6 @@ a.pk-button.pk-button {
 	}
 }
 
-// mobile buttons extended like metz-metropole-2019
-@media (max-width: $very-small-limit) {
-	form.quixote div.buttons {
-		display: flex;
-		flex-wrap: wrap;
-		div.widget {
-			div.content,
-			button {
-				width: 100%;
-			}
-			div.content {
-				padding-right: 1.5rem;
-			}
-		}
-		div.previous-button,
-		div.cancel-button,
-		div.submit-button {
-			flex: 1;
-		}
-	}
-}
-
 //
 //	GLOBAL LAYOUT
 //
-- 
2.39.2


From 6a472a844fa14185d5e621f23e105ad0e45a5f0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <csechet@entrouvert.com>
Date: Tue, 6 Dec 2022 16:12:39 +0100
Subject: [PATCH 2/2] use gap to avoid negative margin-right

---
 static/includes/_forms.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index 7b5b4349..95e1aba7 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -657,7 +657,7 @@ div.select2-search {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: $buttons-alignment;
-		margin-right: -1.5em;
+		gap: 0 1.5rem;
 
 		@each $btn, $grow in $buttons-order {
 			$i: index($buttons-order, $btn);
@@ -686,6 +686,7 @@ div.select2-search {
 			}
 			button {
 				flex-grow: 1;
+				margin-right: 0;
 			}
 		}
 	}
-- 
2.39.2