From e2d3a3ee24cb10a2d4c96d77aaad03cc99510cb4 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Mon, 24 Jan 2022 16:14:25 +0200
Subject: [PATCH] Issue #3184667 by Spokje, Sakthivel M, mirom, rikki_iki,
mherchel, ckrina, DamienMcKenna, djsagar, mstrelan, Gauravmahlawat, HeikkiY,
heni_deepak, drennvin, vikashsoni, bnjmnm, kvantstudio, lauriii: Node form
layout looks awkward on wide screens since #3158854
---
core/themes/claro/css/layout/node-add.css | 18 +++++++++++++++++-
core/themes/claro/css/layout/node-add.pcss.css | 17 ++++++++++++++++-
2 files changed, 33 insertions(+), 2 deletions(-)
diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css
index b7c306fe8824..f40cde0fb888 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 2f1353f0afb4..f9271c535481 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);
+ }
+}
--
GitLab