Fix grid layout padding on small screens (#64878)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Sep 23, 2024 · a851bd2 · a851bd2 · github-actions · Sep 23, 2024
1 parent b6229a4
commit a851bd2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
@@ -80,7 +80,6 @@
 		padding: $grid-unit-15 $grid-unit-30;
 	}
 
-	.dataviews-view-grid,
 	.dataviews-no-results,
 	.dataviews-loading {
 		padding-left: $grid-unit-30;

diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -163,3 +163,11 @@
 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
 	top: $grid-unit-10;
 }
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-view-grid {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}