Adjust cell padding to improve ipad landscape layout

WordPress · Jan 8, 2024 · 9223ee3 · 9223ee3
1 parent 6acab13
commit 9223ee3
Showing 1 changed file with 13 additions and 2 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);
 			}
 		}
 	}