From a57d6815a9ad0406400a908f7a1d934daa900f8c Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Mon, 8 Jan 2024 13:44:56 +1300 Subject: [PATCH] Adjust cell padding to improve ipad landscape layout --- .../src/site-meta-list/style.scss | 15 +++++++++++++-- .../themes/wporg-showcase-2022/theme.json | 5 ----- 2 files changed, 13 insertions(+), 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 index 5b4a1d69..515a198d 100644 --- 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,6 +16,8 @@ } tr { + vertical-align: baseline; + &:not(:last-of-type) { border-bottom: 1px solid; border-color: inherit; @@ -23,16 +25,23 @@ 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 index d99ae9ce..478f8d8d 100644 --- 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" - } } } },