fix: multiple styling issues with DBHeader

db-ui · Jul 31, 2024 · 6076142 · 6076142
1 parent 48d1459
commit 6076142
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 9 deletions.
diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss
@@ -10,7 +10,7 @@
 	display: flex;
 	flex-direction: column;
 	position: relative;
-	min-block-size: component.$default-mobile-header-height;
+	min-block-size: component.$min-mobile-header-height;
 	border-block-end: variables.$db-border-height-3xs solid
 		colors.$db-current-color-border;
 
@@ -105,7 +105,7 @@
 
 		&::before {
 			position: inherit;
-			block-size: 100%;
+			block-size: variables.$db-sizing-md;
 			margin-inline-start: variables.$db-spacing-fixed-lg;
 		}
 	}
@@ -141,7 +141,7 @@
 	&::before {
 		margin-inline: variables.$db-spacing-fixed-xs;
 		position: inherit;
-		block-size: 100%;
+		block-size: variables.$db-sizing-md;
 	}
 }
 
@@ -229,7 +229,7 @@
 }
 
 /* Only for Mobile */
-.db-header-drawer-navigation > .db-header-meta-navigation {
+.db-header-drawer-navigation > .db-header-meta-navigation:not(:empty) {
 	display: inherit;
 }
 

diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -161,7 +161,7 @@
 	overflow-y: auto;
 	// additional #{$db-spacing-fixed-3xs} for border
 	inset-block: calc(
-			#{component.$default-mobile-header-height} + #{variables.$db-spacing-fixed-3xs}
+			#{component.$min-mobile-header-height} + #{variables.$db-spacing-fixed-3xs}
 		)
 		calc(
 			#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2 +

diff --git a/packages/components/src/styles/_component.scss b/packages/components/src/styles/_component.scss
@@ -3,9 +3,8 @@
 @use "@db-ui/foundations/build/scss/colors";
 @use "@db-ui/foundations/build/scss/helpers";
 
-$default-mobile-header-height: var(
-	--db-sizing-fixed-mobile-header,
-	#{helpers.px-to-rem(56)}
+$min-mobile-header-height: calc(
+	#{variables.$db-sizing-md} + 2 * #{variables.$db-spacing-fixed-xs}
 );
 
 $default-disabled: 0.4;

diff --git a/packages/foundations/scss/default-theme.scss b/packages/foundations/scss/default-theme.scss
@@ -111,7 +111,6 @@
 	--db-spacing-fixed-expressive-xl: 3rem;
 	--db-spacing-fixed-expressive-2xl: 5rem;
 	--db-spacing-fixed-expressive-3xl: 7.5rem;
-	--db-sizing-fixed-mobile-header: 3.5rem;
 	--db-sizing-regular-3xl: 15rem;
 	--db-sizing-regular-2xl: 10rem;
 	--db-sizing-regular-xl: 6rem;