fix: set viewport-fit=cover to enable CSS env() variables in PWAs (#2…

…0836)

Using env() variables in PWAs requires viewport-fit=cover to be set in the <meta name="viewport">. Without this setting, some parts of such components as app-layout get cut off on iOS devices. Adding viewport-fit follows MDN's documentation about env() variables and helps fix such issues .

Fixes vaadin/web-components#8449

flow-server/src/main/java/com/vaadin/flow/component/page/Viewport.java

@@ -25,7 +25,8 @@
 /**
  * Defines a viewport tag that will be added to the HTML of the host page of a
  * UI class. If no viewport tag has been defined, a default of
- * <code>width=device-width, initial-scale=1.0</code> is used.
+ * <code>width=device-width, initial-scale=1.0, viewport-fit=cover</code> is
+ * used.
  *
  * @author Vaadin Ltd
  * @since 1.0
@@ -42,20 +43,20 @@
      * <p>
      * Recommended for a Responsive Web Design.
      */
-    String DEFAULT = "width=device-width, initial-scale=1.0";
+    String DEFAULT = "width=device-width, initial-scale=1.0, viewport-fit=cover";
 
     /**
      * Sets the viewport to the height of the device rather than the rendered
      * space.
      */
-    String DEVICE_HEIGHT = "height=device-height, initial-scale=1.0";
+    String DEVICE_HEIGHT = "height=device-height, initial-scale=1.0, viewport-fit=cover";
 
     /**
      * Sets the viewport at the width and height of the device. The device-width
      * and device-height properties are translated to 100vw and 100vh
      * respectively.
      */
-    String DEVICE_DIMENSIONS = "width=device-width, height=device-height, initial-scale=1.0";
+    String DEVICE_DIMENSIONS = "width=device-width, height=device-height, initial-scale=1.0, viewport-fit=cover";
 
     /**
      * Gets the viewport tag content.

flow-tests/test-ccdm/src/test/java/com/vaadin/flow/ccdmtest/IndexHtmlRequestHandlerIT.java

@@ -53,7 +53,7 @@ public void should_add_appShellAnnotations() {
                 By.cssSelector("meta[name=viewport]"));
         Assert.assertNotNull(metaViewPort);
         Assert.assertEquals(
-                "width=device-width, height=device-height, initial-scale=1.0",
+                "width=device-width, height=device-height, initial-scale=1.0, viewport-fit=cover",
                 metaViewPort.getAttribute("content"));
     }