Make height/width optional as well

specification/draft/apps.mdx

@@ -464,9 +464,9 @@ interface HostContext {
   /** Current and maximum dimensions available to the UI. */
   viewport?: {
     /** Current viewport width in pixels. */
-    width: number;
+    width?: number;
     /** Current viewport height in pixels. */
-    height: number;
+    height?: number;
     /** Maximum available height in pixels (if constrained). */
     maxHeight?: number;
     /** Maximum available width in pixels (if constrained). */
@@ -552,20 +552,20 @@ if (viewport) {
   // Handle height
   if ("height" in viewport) {
     // Fixed height: fill the container
-    document.body.style.height = "100%";
+    document.documentElement.style.height = "100vh";
   } else if (viewport.maxHeight) {
     // Flexible with max: let content determine size, up to max
-    document.body.style.maxHeight = `${viewport.maxHeight}px`;
+    document.documentElement.style.maxHeight = `${viewport.maxHeight}px`;
   }
   // If neither, height is unbounded
 
   // Handle width
   if ("width" in viewport) {
     // Fixed width: fill the container
-    document.body.style.width = "100%";
+    document.documentElement.style.width = "100vw";
   } else if (viewport.maxWidth) {
     // Flexible with max: let content determine size, up to max
-    document.body.style.maxWidth = `${viewport.maxWidth}px`;
+    document.documentElement.style.maxWidth = `${viewport.maxWidth}px`;
   }
   // If neither, width is unbounded
 }

src/generated/schema.json

@@ -649,7 +649,6 @@
                   "type": "number"
                 }
               },
-              "required": ["width", "height"],
               "additionalProperties": false
             },
             "locale": {
@@ -1275,7 +1274,6 @@
               "type": "number"
             }
           },
-          "required": ["width", "height"],
           "additionalProperties": false
         },
         "locale": {
@@ -2434,7 +2432,6 @@
                   "type": "number"
                 }
               },
-              "required": ["width", "height"],
               "additionalProperties": false
             },
             "locale": {

src/generated/schema.ts

@@ -566,9 +566,15 @@ export const McpUiHostContextSchema = z.looseObject({
   viewport: z
     .object({
       /** @description Current viewport width in pixels. */
-      width: z.number().describe("Current viewport width in pixels."),
+      width: z
+        .number()
+        .optional()
+        .describe("Current viewport width in pixels."),
       /** @description Current viewport height in pixels. */
-      height: z.number().describe("Current viewport height in pixels."),
+      height: z
+        .number()
+        .optional()
+        .describe("Current viewport height in pixels."),
       /** @description Maximum available height in pixels (if constrained). */
       maxHeight: z
         .number()

src/spec.types.ts

@@ -327,9 +327,9 @@ export interface McpUiHostContext {
   /** @description Current and maximum dimensions available to the UI. */
   viewport?: {
     /** @description Current viewport width in pixels. */
-    width: number;
+    width?: number;
     /** @description Current viewport height in pixels. */
-    height: number;
+    height?: number;
     /** @description Maximum available height in pixels (if constrained). */
     maxHeight?: number;
     /** @description Maximum available width in pixels (if constrained). */