From 243249090892e1c270ddd068cd8245b68906fbd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Wed, 6 Feb 2019 16:21:07 +0100
Subject: [PATCH] scss: add never-alone class to keep grid on very small widths
 (#29561)

---
 help/fr/misc-grid.page     | 15 ++++++++++++---
 static/includes/_grid.scss |  6 ++++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/help/fr/misc-grid.page b/help/fr/misc-grid.page
index 82b9c470..3b127a74 100644
--- a/help/fr/misc-grid.page
+++ b/help/fr/misc-grid.page
@@ -30,11 +30,20 @@ en faisant les deux-tiers.  Les dénominateurs possibles sont 2, 3, 4, 6
 et 12.
 </p>
 
-<note><p>
-Sur les petits écrans, les éléments de grille sont affichés sur toute la
-largeur.
+<note>
+<p>
+Sur des écrans de petite dimension, la grille est automatiquement adaptée pour
+ne pas rétrécir outre mesure les éléments, la largeur de ceux-ci est doublée,
+par exemple un élément configuré pour une largeur d'un quart d'écran prendra
+non pas un quart d'écran mais un demi écran.
 </p>
 
+<p>
+Sur les très petits écrans, la mécanique de grille est totalement annulée et
+tous les éléments de grille sont affichés sur toute la largeur disponible.
+Il est cependant possible d'empêcher ce comportement en accompagnant la classe
+<code>grid-x-y</code> de la classe <code>never-alone</code>.
+</p>
 </note>
 
 <p>
diff --git a/static/includes/_grid.scss b/static/includes/_grid.scss
index e2685672..84802c0d 100644
--- a/static/includes/_grid.scss
+++ b/static/includes/_grid.scss
@@ -14,8 +14,10 @@ div[class*=grid-] {
 	box-sizing: border-box;
 	padding-right: $grid-gutter;
 	@media screen and (max-width: $very-small-limit) {
-		width: 100%;
-		padding-right: 0;
+		&:not(.never-alone) {
+			width: 100%;
+			padding-right: 0;
+		}
 	}
 	table, textarea, select, input[type=text], input[type=password], input[type=email] {
 		width: 100%;