diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css
index b7c306fe88242a39a66f32c6296832c3561b4e6a..f40cde0fb8883e6eb5660768e3d7ef3905e77e70 100644
--- a/core/themes/claro/css/layout/node-add.css
+++ b/core/themes/claro/css/layout/node-add.css
@@ -11,6 +11,7 @@
 
 :root {
   --node-meta-width: 22.5rem;
+  --node-meta-xl-width: 25vw;
 }
 
 .layout-region {
@@ -41,7 +42,7 @@
 
   .layout-region--node-main .layout-region__content,
   .layout-region--node-footer .layout-region__content {
-    max-width: 48rem;
+    max-width: 52rem;
     margin-right: auto;
     margin-left: auto;
   }
@@ -63,3 +64,18 @@
     margin-top: var(--space-l);
   }
 }
+
+/**
+ * Extra Wide screens
+ */
+
+@media screen and (min-width: 112rem) {
+  .layout-region--node-main,
+  .layout-region--node-footer {
+    width: calc(100% - var(--node-meta-xl-width));
+  }
+
+  .layout-region--node-secondary {
+    width: var(--node-meta-xl-width);
+  }
+}
diff --git a/core/themes/claro/css/layout/node-add.pcss.css b/core/themes/claro/css/layout/node-add.pcss.css
index 2f1353f0afb4dc2c72626dc3c9e5381314f0d71a..f9271c535481eafbe39fc302615ee627f31102e7 100644
--- a/core/themes/claro/css/layout/node-add.pcss.css
+++ b/core/themes/claro/css/layout/node-add.pcss.css
@@ -4,6 +4,7 @@
 
 :root {
   --node-meta-width: 22.5rem;
+  --node-meta-xl-width: 25vw;
 }
 
 .layout-region {
@@ -33,7 +34,7 @@
 
   .layout-region--node-main .layout-region__content,
   .layout-region--node-footer .layout-region__content {
-    max-width: 48rem;
+    max-width: 52rem;
     margin-right: auto;
     margin-left: auto;
   }
@@ -55,3 +56,17 @@
     margin-top: var(--space-l);
   }
 }
+
+/**
+ * Extra Wide screens
+ */
+@media screen and (min-width: 112rem) {
+  .layout-region--node-main,
+  .layout-region--node-footer {
+    width: calc(100% - var(--node-meta-xl-width));
+  }
+
+  .layout-region--node-secondary {
+    width: var(--node-meta-xl-width);
+  }
+}