Merge pull request #9145 from google/bug/9061-fix-dialog-bullet-align…

…ment

assets/js/components/consent-mode/ConfirmDisableConsentModeDialog.js

@@ -97,6 +97,7 @@ export default function ConfirmDisableConsentModeDialog( {
 
 	return (
 		<ModalDialog
+			className="googlesitekit-settings-module__confirm-disconnect-modal"
 			dialogActive
 			title={ __( 'Disable consent mode?', 'google-site-kit' ) }
 			subtitle={ subtitle }

assets/js/components/conversion-tracking/ConfirmDisableConversionTrackingDialog.js

@@ -57,6 +57,7 @@ export default function ConfirmDisableConversionTrackingDialog( {
 
 	return (
 		<ModalDialog
+			className="googlesitekit-settings-module__confirm-disconnect-modal"
 			dialogActive
 			title={ __(
 				'Disable enhanced conversion tracking',

assets/js/components/settings/SettingsActiveModule/ConfirmDisconnect.stories.js

@@ -52,7 +52,43 @@ ConfirmDisconnectWithFeatures.decorators = [
 
 			registry
 				.dispatch( CORE_UI )
-				.setValue( 'module-analytics-dialogActive', true );
+				.setValue( 'module-analytics-4-dialogActive', true );
+		};
+
+		return (
+			<WithRegistrySetup func={ setupRegistry }>
+				<Story />
+			</WithRegistrySetup>
+		);
+	},
+];
+ConfirmDisconnectWithFeatures.scenario = {};
+
+export const ConfirmDisconnectWithFeaturesAndLongText = Template.bind( {} );
+ConfirmDisconnectWithFeaturesAndLongText.storyName =
+	'ConfirmDisconnect dialog with features and long text';
+ConfirmDisconnectWithFeaturesAndLongText.args = {
+	slug: 'third-party-module',
+};
+ConfirmDisconnectWithFeaturesAndLongText.decorators = [
+	( Story ) => {
+		const setupRegistry = ( registry ) => {
+			provideModules( registry, [
+				{
+					slug: 'third-party-module',
+					active: true,
+					connected: true,
+					name: 'Third Party Module With A Long Name',
+					features: [
+						'Module overview, on a long line to test wrapping, and more text to test wrapping with a long line of text',
+						'Another feature',
+					],
+				},
+			] );
+
+			registry
+				.dispatch( CORE_UI )
+				.setValue( 'module-third-party-module-dialogActive', true );
 		};
 
 		return (

assets/sass/vendor/_mdc-dialog.scss

@@ -97,7 +97,7 @@
 				letter-spacing: $ls-xs;
 				line-height: $lh-body-sm;
 				min-height: 32px;
-				padding-left: 10px;
+				padding: 6px 0 6px 10px;
 
 				&::before {
 					background-color: $c-surfaces-on-surface;
@@ -106,8 +106,7 @@
 					height: 4px;
 					left: 0;
 					position: absolute;
-					top: 50%;
-					transform: translateY(-50%);
+					top: 14.3px; // Ensure the bullet point is vertically centered to the first line of text.
 					width: 4px;
 				}
 			}
@@ -146,5 +145,9 @@
 		.mdc-dialog__title {
 			align-items: flex-start;
 		}
+
+		.mdc-list-item:last-child {
+			border-bottom: 0;
+		}
 	}
 }