Issue #3398277 by Gauravvvv, saschaeggi, cilefen: Claro content editing area is too narrow

core/themes/claro/css/base/variables.css

@@ -248,4 +248,9 @@
    * Breadcrumb.
    */
   --breadcrumb-height: 1.25rem;
+  /**
+   * Layout.
+   */
+  --layout-region-edit-width: min(60rem, 100%);
+  --layout-region-edit-extended-width: min(68rem, 100%);
 }

core/themes/claro/css/base/variables.pcss.css

@@ -242,4 +242,9 @@
    * Breadcrumb.
    */
   --breadcrumb-height: 1.25rem;
+  /**
+   * Layout.
+   */
+  --layout-region-edit-width: min(960px, 100%);
+  --layout-region-edit-extended-width: min(1088px, 100%);
 }

core/themes/claro/css/layout/form-two-columns.css

@@ -28,7 +28,13 @@
   .layout-region--footer {
     grid-column: 1;
     margin-inline: auto;
-    width: min(52rem, 100%);
+    width: var(--layout-region-edit-width);
+  }
+
+  /* When the layout has vertical tabs */
+  .layout-region--main:has(.vertical-tabs),
+  .layout-region--main:has(.vertical-tabs) ~ .layout-region--footer {
+    width: var(--layout-region-edit-extended-width);
   }
 
   /* Push sidebar down to horizontal align with form section. */

core/themes/claro/css/layout/form-two-columns.pcss.css

@@ -24,7 +24,13 @@
   .layout-region--footer {
     grid-column: 1;
     margin-inline: auto;
-    width: min(832px, 100%);
+    width: var(--layout-region-edit-width);
+  }
+
+  /* When the layout has vertical tabs */
+  .layout-region--main:has(.vertical-tabs),
+  .layout-region--main:has(.vertical-tabs) ~ .layout-region--footer {
+    width: var(--layout-region-edit-extended-width);
   }
 
   /* Push sidebar down to horizontal align with form section. */