fix(ui5-dialog): restrict max height and width based on spec (#1665)

FIXES: #1662
SAP · May 22, 2020 · a00225c · a00225c
1 parent d00b0be
commit a00225c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 1 deletion.
diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css
@@ -15,6 +15,11 @@
 	height: 100%;
 }
 
+:host([stretch][on-phone]) .ui5-popup-root {
+	max-height: 100vh;
+	max-width: 100vw;
+}
+
 .ui5-popup-root {
 	display: flex;
 	flex-direction: column;

diff --git a/packages/main/src/themes/Popup.css b/packages/main/src/themes/Popup.css
@@ -18,6 +18,8 @@
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+	max-height: 94vh;
+	max-width: 90vw;
 }
 
 @media screen and (-ms-high-contrast: active) {

diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
@@ -43,6 +43,54 @@
 	<ui5-dialog id="msg-dialog" header-text="Message dialog">
 		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
 			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
+		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
+			That´s OpenUI5.</p>
 
 		<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; padding: .25rem 1rem;">
 			<ui5-button design="Emphasized">OK</ui5-button>
@@ -107,7 +155,7 @@
 
 		<ui5-button id='popbtn'>Open Popover</ui5-button>
 
-	
+
 
 		<br>
 		<br>