From 3df04e719c1b78270c82c64c3bd6990fa1c5c89c Mon Sep 17 00:00:00 2001
From: Cristina Chumillas <ckrina@1206650.no-reply.drupal.org>
Date: Fri, 15 Dec 2023 19:29:35 +0100
Subject: [PATCH] Issue #3398277 by Gauravvvv, saschaeggi, cilefen: Claro
content editing area is too narrow
---
core/themes/claro/css/base/variables.css | 5 +++++
core/themes/claro/css/base/variables.pcss.css | 5 +++++
core/themes/claro/css/layout/form-two-columns.css | 8 +++++++-
core/themes/claro/css/layout/form-two-columns.pcss.css | 8 +++++++-
4 files changed, 24 insertions(+), 2 deletions(-)
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 285ad935e982..5dcccbf2608d 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 3bfbb4f07fa1..202787031f36 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 0c737bce8072..8364fcb7dfff 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 ff458b1f3e49..5cf44ff277fc 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. */
--
GitLab