Dialog fixes

vue-components/src/components/Dialog.vue

@@ -38,7 +38,7 @@
 						icon-only
 						@click.native="dismiss"
 					>
-						<icon type="close" size="medium" />
+						<icon type="close" size="large" />
 					</Button>
 				</header>
 				<section
@@ -172,6 +172,7 @@ export default Vue.extend( {
 	beforeDestroy() {
 		if ( this.open ) {
 			this.hide();
+			this._restoreScroll();
 		}
 	},
 	watch: {
@@ -287,6 +288,10 @@ export default Vue.extend( {
 
 			( focusable[ indices.next() ] as HTMLElement ).focus();
 		},
+		_hasDocumentScrollbars(): boolean {
+			const root = document.documentElement;
+			return root.scrollHeight + root.scrollWidth > root.clientHeight + root.clientWidth;
+		},
 		_trapFocus(): void {
 			const content = this.$refs.content as HTMLElement;
 			const target: HTMLElement = content.querySelector( '[autofocus]' ) ?? content;
@@ -297,6 +302,11 @@ export default Vue.extend( {
 			}
 		},
 		_trapScroll(): void {
+			// Guard to exit early if there are no scrollbars
+			if ( !this._hasDocumentScrollbars() ) {
+				return;
+			}
+
 			const root = document.documentElement;
 			const documentStyles = window.getComputedStyle( root );
 
@@ -328,6 +338,11 @@ export default Vue.extend( {
 			}
 		},
 		_restoreScroll(): void {
+			// Guard to exit early if there are no scrollbars
+			if ( !this._hasDocumentScrollbars() ) {
+				return;
+			}
+
 			const { overflow, padding } = this.document.cache;
 
 			document.documentElement.style.overflow = overflow;
@@ -379,8 +394,8 @@ export default Vue.extend( {
 		max-height: 90%;
 
 		position: absolute;
-		inset-block-start: 0;
-		inset-inline-start: 0;
+		inset-block-start: 50%;
+		inset-inline-start: 50%;
 		transform: translate(-50%, -50%);
 
 		/**
@@ -466,7 +481,7 @@ export default Vue.extend( {
 	.fade-zoom-enter-active,
 	.fade-zoom-leave-active {
 		// A default transition duration needs to be added, in order to allow
-		// vue to add the crrect classes
+		// vue to add the correct classes
 		transition-duration: $wikit-Dialog-transition-duration;
 
 		#{$base}__overlay {

vue-components/stories/Dialog.stories.ts

@@ -12,7 +12,7 @@ export function complex( args: { title: string, actions: string, dismissButton:
 		components: { Button, Dialog },
 		props: Object.keys( args ),
 		template: `
-			<div style="height: 70vh;">
+			<div style="max-height: 70vh;">
 				<Button 
 					@click.native="$refs.simple.show()" 
 					variant="primary" type="progressive"
@@ -23,7 +23,6 @@ export function complex( args: { title: string, actions: string, dismissButton:
 					:title="title"
 					ref="simple"
 					:actions="actions"
-					style="transform: translate(50%, 50%)"
 					@action="(_, dialog) => dialog.hide()"
 					:dismiss-button="dismissButton"
 					:visible="visible"
@@ -37,7 +36,7 @@ export function complex( args: { title: string, actions: string, dismissButton:
 
 complex.args = {
 	title: 'Complex dialog',
-	dismissButton: 'true',
+	dismissButton: true,
 	actions: [
 		{
 			label: 'Primary action',
@@ -48,7 +47,7 @@ complex.args = {
 			namespace: 'secondary'
 		}
 	],
-	visible: true,
+	visible: false,
 	content: `Complex dialogs can display extensive information and contain all kinds of interactive elements
 	(such as inputs, tables, tabs, lists) that may allow users to submit and edit information.