fix: issue with mobile header wrong padding and not hidden on desktop (#1488)

* fix: issue with mobile header wrong padding and not hidden on desktop

* fix: removed additional visibility for header

---------

Co-authored-by: Maximilian Franzke <[email protected]>

Author: nmerget

packages/components/src/components/drawer/drawer.scss

@@ -76,12 +76,20 @@ $spacings: (
 	padding-block: map.get($spacing, "block");
 
 	.db-drawer-header {
-		padding-block-end: map.get($spacing, "block");
+		// We need this variable to overwrite it inside the header
+		padding-block-end: var(
+			--db-drawer-header-padding-block-end,
+			#{map.get($spacing, "block")}
+		);
 		padding-inline: map.get($spacing, "inline");
 	}
 
 	.db-drawer-content {
-		padding-inline: map.get($spacing, "inline");
+		// We need this variable to overwrite it inside the header
+		padding-inline: var(
+			--db-drawer-content-padding-inline,
+			#{map.get($spacing, "inline")}
+		);
 	}
 }
 

packages/components/src/components/header/header.lite.tsx

@@ -81,7 +81,7 @@ export default function DBHeader(props: DBHeaderProps) {
 				className="db-header-drawer"
 				rounded
 				withCloseButton
-				spacing="none"
+				spacing="small"
 				open={props.drawerOpen}
 				onClose={() => state.toggle()}>
 				<div class="db-header-drawer-navigation">