diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 285ad935e9829cd7e138107ac4166d7d52379663..5dcccbf2608daa6948a9af616df3ccc6ced13310 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/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%);
 }
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 3bfbb4f07fa138fb199e220858986838f76784ab..202787031f3673a97af8d38b1149b0039ab07562 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/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%);
 }
diff --git a/core/themes/claro/css/layout/form-two-columns.css b/core/themes/claro/css/layout/form-two-columns.css
index 0c737bce8072c741e87c00317d0f5fe3818917ca..8364fcb7dfff9f7821b6efaffcda9636fe20e637 100644
--- a/core/themes/claro/css/layout/form-two-columns.css
+++ b/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. */
diff --git a/core/themes/claro/css/layout/form-two-columns.pcss.css b/core/themes/claro/css/layout/form-two-columns.pcss.css
index ff458b1f3e49cf6a64695d0e74942978f0e483ed..5cf44ff277fce8a5276d8f4c9c1914df84565cdd 100644
--- a/core/themes/claro/css/layout/form-two-columns.pcss.css
+++ b/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. */