fix(dialog): header & content width (#1209)

Vonage · Jan 24, 2022 · a38e7df · a38e7df
1 parent 8439af3
commit a38e7df
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/components/dialog/src/vwc-dialog.scss b/components/dialog/src/vwc-dialog.scss
@@ -63,4 +63,8 @@
 		right: 16px;
 		display: block;
 	}
+	.mdc-dialog__title,
+	.mdc-dialog__content {
+		width: calc(100% - 20px);
+	}
 }
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
@@ -13,7 +13,7 @@ export default {
 const Template = args => html`
 	<vwc-button @click="${handleOpenDialogClick}" layout="outlined">Open dialog</vwc-button>
 	<vwc-dialog ...=${spread(args)}>
-		<div>This is the modal's content.</div>
+		<div>This is the modal's content. The content can be long but still will not be cut off by the close button</div>
 		<vwc-button
 			slot="primaryAction"
 			dialogAction="discard">
@@ -61,7 +61,7 @@ export const Modal = Template.bind({});
 Modal.args = { heading: 'This is a modal window', scrimClickAction: '' };
 
 export const CloseButton = Template.bind({});
-CloseButton.args = { 'close-button': 'true' };
+CloseButton.args = { 'close-button': 'true', heading: 'This is a modal window with a close button' };
 
 function handleOpenDialogClick(e) {
 	document.querySelector('vwc-dialog').show();