From 3b1297143af6c7b67c5330104909827a8b5afe27 Mon Sep 17 00:00:00 2001 From: Dan Webb Date: Wed, 12 Nov 2025 16:04:02 +0000 Subject: [PATCH 1/2] feat(Menubar): make anchors fill the entire tab --- src/components/controls/Menubar/Menubar.module.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/controls/Menubar/Menubar.module.scss b/src/components/controls/Menubar/Menubar.module.scss index 495d979..be87349 100644 --- a/src/components/controls/Menubar/Menubar.module.scss +++ b/src/components/controls/Menubar/Menubar.module.scss @@ -45,9 +45,16 @@ position: relative; a { + align-items: center; color: color-mix(in srgb, var(--skin-color) 75%, transparent 25%); + display: flex; + height: 100%; + justify-content: center; + padding: var(--spacing-md); + text-align: center; text-decoration: none; transition: background var(--transition) color var(--transition); + width: 100%; &:hover, &:focus { @@ -79,6 +86,11 @@ min-height: var(--spacing-thumb); padding: var(--spacing-md); text-align: center; + + &:has(> a) { + // remove padding to allow anchor to fill entire tab + padding: 0; + } } &--active &-inner { From 9c31dcaed20efbadf15801a9659386b49e68e6e0 Mon Sep 17 00:00:00 2001 From: Dan Webb Date: Wed, 12 Nov 2025 16:04:45 +0000 Subject: [PATCH 2/2] feat(Menubar): make tabs fill the whole height of the menubar --- src/components/controls/Menubar/Menubar.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/controls/Menubar/Menubar.module.scss b/src/components/controls/Menubar/Menubar.module.scss index be87349..d29e692 100644 --- a/src/components/controls/Menubar/Menubar.module.scss +++ b/src/components/controls/Menubar/Menubar.module.scss @@ -82,6 +82,7 @@ align-items: center; display: flex; + height: 100%; justify-content: center; min-height: var(--spacing-thumb); padding: var(--spacing-md);