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

packages/main/src/Dialog.ts

@@ -71,8 +71,8 @@ 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` on full screen. This is recommended for better usability on mobile devices.
+ * On desktop and tablet `stretch` property can be switched off.
  *
  * **Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.
  *
@@ -131,10 +131,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 in 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 it's width in small screens*/
 }
 
 :host([draggable]) .ui5-popup-header-root,