fix(ui5-dialog): width on mobile is not bigger than the phone width (#…

…10199)

Issue: When the base font in the 'html' element is changed to something
different than the default 16px (for example 32px) the width
of the dialog can become larger than the width of the phone's
display. This is caused by the 'min-width' (20rem) of the dialog.
For the dialog on phone it is recommended by the design to set the dialog's
property 'stretch' to true to use the full screen size.

The solution: When we have stretched dialog on phone the 'min-width' should
 not be applied (the width is 100%).

fixes: #10000

packages/main/src/Dialog.ts

@@ -71,8 +71,7 @@ const ICON_PER_STATE: Record<ValueStateWithIcon, string> = {
 
  *
  * ### Responsive Behavior
- * The `stretch` property can be used to stretch the
- * `ui5-dialog` on full screen.
+ * The `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.
  *
  * **Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.
  *
@@ -131,10 +130,10 @@ class Dialog extends Popup {
 	headerText?: string;
 
 	/**
-	 * Determines whether the component should be stretched to fullscreen.
+	 * Determines if the dialog will be stretched to full screen on mobile. On desktop,
+	 * the dialog will be stretched to approximately 90% of the viewport.
 	 *
-	 * **Note:** The component will be stretched to approximately
-	 * 90% of the viewport.
+	 * **Note:** For better usability of the component it is recommended to set this property to "true" when the dialog is opened on phone.
 	 * @default false
 	 * @public
 	 */

packages/main/src/themes/Dialog.css

@@ -21,6 +21,7 @@
 	max-height: 100%;
 	max-width: 100%;
 	border-radius: 0;
+	min-width: 0; /*this is for preventing the dialog to hold its width on small screens*/
 }
 
 :host([draggable]) .ui5-popup-header-root,