fix(banner): height changes when dismissible

components/banner/src/vwc-banner.scss

@@ -19,22 +19,18 @@
 		> .header {
 			@include typography.typography-cat-shorthand('body-2-bold');
 			display: flex;
+			min-height: 60px;
 			align-items: center;
 			justify-content: flex-start;
-			padding: 20px 0;
 			background-color: var(#{color-connotation.$vvd-color-connotation});
 			color: var(#{color-connotation.$vvd-color-on-connotation});
 
-			&::before {
-				flex: 0 0 16px;
-				content: '';
-			}
-
 			> .user-content {
 				display: flex;
 				flex: 1 0;
 				align-items: center;
 				justify-content: center;
+				padding-inline: 16px;
 
 				> .icon {
 					--icon-size: 20px;
@@ -47,6 +43,10 @@
 					flex: 0 0 auto;
 					padding-inline-start: 15px;
 				}
+
+				> .message {
+					padding: 20px 0;
+				}
 			}
 
 			> .dismiss-button {

components/banner/stories/banner.stories.js

@@ -22,7 +22,8 @@ export const Basic = (function () {
 		{
 			connotation,
 			dismissible,
-			icon
+			icon,
+			message
 		}
 	) {
 		cancelAnimations();
@@ -64,7 +65,7 @@ export const Basic = (function () {
 					?dismissible=${dismissible}
 					icon=${ifDefined(icon)}
 					connotation=${connotation}
-					message="Here's some information that you may find important!">
+					message=${message}>
 					<vwc-button slot="actionItems" layout="filled" @click=${onClose} dense>Learn More</vwc-button>
 				</vwc-banner>
 				<div class="content"></div>
@@ -76,7 +77,8 @@ export const Basic = (function () {
 
 Basic.args = {
 	connotation: "info",
-	dismissible: true
+	dismissible: true,
+	message: "Here's some information that you may find important!"
 };
 Basic.argTypes = {
 	open: {