Adjust cell padding to improve ipad landscape layout

WordPress · Jan 8, 2024 · a57d681 · a57d681
1 parent 6acab13
commit a57d681
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/site-meta-list/style.scss
@@ -16,23 +16,32 @@
 	}
 
 	tr {
+		vertical-align: baseline;
+
 		&:not(:last-of-type) {
 			border-bottom: 1px solid;
 			border-color: inherit;
 		}
 
 		th:not(.screen-reader-text),
 		td {
-			padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
+			padding-top: var(--wp--preset--spacing--10);
+			padding-bottom: var(--wp--preset--spacing--10);
 		}
 
-		th {
+		th:not(.screen-reader-text) {
 			font-weight: 400;
 			text-align: start;
+			min-width: 100px;
+			padding-inline-start: var(--wp--preset--spacing--20);
+			// Keep a letter space between the label and the value.
+			// Required on smaller screens where they're more likely to collide.
+			padding-inline-end: 0.5em;
 		}
 
 		td {
 			text-align: end;
+			padding-inline-end: var(--wp--preset--spacing--20);
 		}
 
 		@media (max-width: 380px) {
@@ -45,11 +54,13 @@
 
 			th:not(.screen-reader-text) {
 				padding-bottom: 0;
+				padding-inline-end: var(--wp--preset--spacing--20);
 			}
 
 			td {
 				text-align: start;
 				padding-top: 0;
+				padding-inline-start: var(--wp--preset--spacing--20);
 			}
 		}
 	}

diff --git a/source/wp-content/themes/wporg-showcase-2022/theme.json b/source/wp-content/themes/wporg-showcase-2022/theme.json
@@ -9,11 +9,6 @@
 					"width": "10px",
 					"radius": "20px"
 				}
-			},
-			"wporg-site-meta-list": {
-				"label": {
-					"width": "100px"
-				}
 			}
 		}
 	},