From d0208220126c04bfedd06cd1b388a183cea8f49b Mon Sep 17 00:00:00 2001 From: Alexander Minges Date: Tue, 29 Jul 2025 19:08:06 +0200 Subject: [PATCH] style: improve tab navigation height and spacing for icons - Increase tab navigation height from 2x to 2.5x line-height - Add proper flexbox centering for tab items with icons - Add gap between icon and text (0.25rem) - Add padding (0.5rem vertical, 0.75rem horizontal) for better touch targets - Reduce icon size to 0.875rem for better visual balance - Remove fixed line-height to allow proper vertical centering - Maintain text shadow effect for active tabs The tab navigation now properly accommodates FontAwesome icons while maintaining good visual hierarchy and touch accessibility. --- scss/components/shared/_sheet_tab_nav.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/scss/components/shared/_sheet_tab_nav.scss b/scss/components/shared/_sheet_tab_nav.scss index 3bef2dd7..1a432568 100644 --- a/scss/components/shared/_sheet_tab_nav.scss +++ b/scss/components/shared/_sheet_tab_nav.scss @@ -12,9 +12,8 @@ nav.tabs { border-top: variables.$border-groove; display: flex; flex-wrap: nowrap; - height: calc(2 * var(--line-height-16)); + height: calc(2.5 * var(--line-height-16)); justify-content: space-around; - line-height: calc(2 * var(--line-height-16)); margin: variables.$margin-sm 0; .ds4-sheet-tab-nav__item, @@ -22,6 +21,16 @@ nav.tabs { flex: 0 1 auto !important; // necessary to override the styling from lang-de, see https://gitlab.com/henry4k/foundryvtt-lang-de/-/issues/9 font-weight: bold; white-space: nowrap; + display: flex; + align-items: center; + justify-content: center; + gap: 0.25rem; + padding: 0.5rem 0.75rem; + line-height: 1; + + i { + font-size: 0.875rem; + } &.active { text-shadow: 0 0 variables.$padding-md var(--color-shadow-primary);