Update per CR feedback.

assets/js/components/ModalDialog.stories.js

@@ -21,31 +21,28 @@
  */
 import ModalDialog from './ModalDialog';
 
-const defaultArgs = {
-	dialogActive: true,
-	title: 'Modal Dialog Title',
-	subtitle:
-		'Modal Dialog Subtitle. It will adjust the width based on default value.',
-	handleConfirm: () =>
-		global.console.log.bind( null, 'Dialog::handleConfirm' ),
-};
-
 function Template( args ) {
-	return <ModalDialog { ...args } />;
+	return (
+		<ModalDialog
+			dialogActive
+			title="Modal Dialog Title"
+			subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo urna vitae commodo sollicitudin."
+			handleConfirm={ () => {} }
+			{ ...args }
+		/>
+	);
 }
 
 export const Default = Template.bind( {} );
 Default.storyName = 'Default';
-Default.args = defaultArgs;
 Default.scenario = {
 	label: 'Global/ModalDialog',
 };
 
 export const Danger = Template.bind( {} );
 Danger.storyName = 'Danger';
 Danger.args = {
-	...defaultArgs,
-	title: 'Danger/Error Modal Dialog Title',
+	title: 'Danger Modal Dialog Title',
 	provides: [ 'Audience overview', 'Top pages', 'Top acquisition channels' ],
 	danger: true,
 };
@@ -54,12 +51,10 @@ Danger.scenario = {
 };
 
 export const DependentModules = Template.bind( {} );
-DependentModules.storyName = 'Danger With DependentModules Text';
+DependentModules.storyName = 'Danger With Dependent Modules';
 DependentModules.args = {
-	...defaultArgs,
-	subtitle:
-		'Longer subtitle text for modal dialog. It will adjust to the size prop.',
-	dependentModules: 'Depend modules text',
+	dependentModules:
+		'Fusce sit amet tellus neque. Praesent egestas dapibus ipsum vel vulputate.',
 	provides: [ 'Audience overview', 'Top pages', 'Top acquisition channels' ],
 	danger: true,
 };
@@ -68,23 +63,17 @@ DependentModules.scenario = {
 };
 
 export const SmallModal = Template.bind( {} );
-SmallModal.storyName = 'Small Width Modal';
+SmallModal.storyName = 'Small';
 SmallModal.args = {
-	...defaultArgs,
-	subtitle:
-		'Longer subtitle text for modal dialog. It will adjust to the size prop.',
 	small: true,
 };
 SmallModal.scenario = {
 	label: 'Global/ModalDialog/Small',
 };
 
 export const MediumModal = Template.bind( {} );
-MediumModal.storyName = 'Medium Width Modal';
+MediumModal.storyName = 'Medium';
 MediumModal.args = {
-	...defaultArgs,
-	subtitle:
-		'Longer subtitle text for modal dialog. It will adjust to the size prop.',
 	medium: true,
 };
 MediumModal.scenario = {

assets/sass/vendor/_mdc-dialog.scss

@@ -9,11 +9,13 @@
 		padding: $grid-gap-desktop;
 
 		@media (min-width: $bp-tablet) {
-			/* Differs from what is seen in figma design - 478px,
-			after disscusion with Sigal https://10up.slack.com/archives/C01CA828ZPZ/p1707129589297719 */
-			max-width: 590px;
+			max-width: 478px;
 			padding: 36px;
 		}
+
+		@media (min-width: $bp-desktop) {
+			max-width: 590px;
+		}
 	}
 
 	.mdc-dialog__lead,
@@ -52,7 +54,7 @@
 
 	.mdc-dialog__lead {
 		font-size: $fs-label-md;
-		font-weight: $fw-normal;
+		font-weight: $fw-medium;
 		line-height: $lh-label-md;
 		margin: 0;
 		max-width: 430px;
@@ -66,9 +68,9 @@
 	}
 
 	.mdc-dialog__dependencies {
-		font-size: $fs-label-sm;
+		font-size: $fs-body-sm;
 		letter-spacing: $ls-xs;
-		line-height: $lh-label-sm;
+		line-height: $lh-body-sm;
 		margin: 1em 0;
 
 		strong {