fix(layout): column basis medium and large in mobile (VIV-2049) (#2065)

* column basis in mobile

* column basis in mobile

* new png for tests

---------

Co-authored-by: Yonatan Kra <[email protected]>

libs/components/src/lib/layout/README.md

@@ -139,24 +139,31 @@ Use `block` to get full-width elements stacking one after the other.
 - Type: `'small'` | `'medium'` | `'large'` | `'block'`
 - Default: `'medium'`
 
+<vwc-note connotation="information">
+
+- **In mobile** both <code>medium</code> and <code>large</code> will get a <code>min-width</code> of <code>100%</code> to avoid horizontal scrolling.
+- To change the column-basis use the css variable [<code>--layout-grid-template-columns</code>](/components/layout/#grid-template-columns)
+
+</vwc-note>
+
 ```html preview full
 <vwc-layout gutters="small" column-basis="small">
-	<vwc-card elevation="2" text="small"></vwc-card>
-	<vwc-card elevation="2" text="small"></vwc-card>
-	<vwc-card elevation="2" text="small"></vwc-card>
-	<vwc-card elevation="2" text="small"></vwc-card>
+	<vwc-card elevation="2" text="small (160px)"></vwc-card>
+	<vwc-card elevation="2" text="small (160px)"></vwc-card>
+	<vwc-card elevation="2" text="small (160px)"></vwc-card>
+	<vwc-card elevation="2" text="small (160px)"></vwc-card>
 </vwc-layout>
 <vwc-layout gutters="small" column-basis="medium">
-	<vwc-card elevation="2" text="medium"></vwc-card>
-	<vwc-card elevation="2" text="medium"></vwc-card>
-	<vwc-card elevation="2" text="medium"></vwc-card>
-	<vwc-card elevation="2" text="medium"></vwc-card>
+	<vwc-card elevation="2" text="medium - default (320px)"></vwc-card>
+	<vwc-card elevation="2" text="medium - default (320px)"></vwc-card>
+	<vwc-card elevation="2" text="medium - default (320px)"></vwc-card>
+	<vwc-card elevation="2" text="medium - default (320px)"></vwc-card>
 </vwc-layout>
 <vwc-layout gutters="small" column-basis="large">
-	<vwc-card elevation="2" text="large"></vwc-card>
-	<vwc-card elevation="2" text="large"></vwc-card>
-	<vwc-card elevation="2" text="large"></vwc-card>
-	<vwc-card elevation="2" text="large"></vwc-card>
+	<vwc-card elevation="2" text="large (380px)"></vwc-card>
+	<vwc-card elevation="2" text="large (380px)"></vwc-card>
+	<vwc-card elevation="2" text="large (380px)"></vwc-card>
+	<vwc-card elevation="2" text="large (380px)"></vwc-card>
 </vwc-layout>
 <vwc-layout gutters="small" column-basis="block">
 	<vwc-card elevation="2" text="block"></vwc-card>

libs/components/src/lib/layout/layout.scss

@@ -7,18 +7,30 @@
 	display: grid;
 	grid-auto-rows: var(#{variables.$layout-grid-template-rows}, min-content);
 
-	@include mixins.measurement(map.keys(variables.$bases)...) using ($basis) {
-		#{functions.get-selector-with-default('.column-basis', $basis, 'medium', map.keys(variables.$bases))} {
+	@media not all and (width >= 600px) {
+		&.column-basis-medium,
+		&.column-basis-large {
 			grid-template-columns: var(
 				#{variables.$layout-grid-template-columns},
-				repeat(
-					var(#{variables.$auto-sizing}),
-					minmax(map.get(variables.$bases, $basis), 1fr)
-				)
+				repeat(var(#{variables.$auto-sizing}), minmax(100%, 1fr))
 			);
 		}
 	}
 
+	@media (width >= 600px) {
+		@include mixins.measurement(map.keys(variables.$bases)...) using ($basis) {
+			#{functions.get-selector-with-default('.column-basis', $basis, 'medium', map.keys(variables.$bases))} {
+				grid-template-columns: var(
+					#{variables.$layout-grid-template-columns},
+					repeat(
+						var(#{variables.$auto-sizing}),
+						minmax(map.get(variables.$bases, $basis), 1fr)
+					)
+				);
+			}
+		}
+	}
+
 	@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {
 		#{functions.get-selector-with-default('.column-spacing', $space, 'medium', map.keys(variables.$spaces))} {
 			column-gap: var(