From abe7539e63a5bbcd08572020a77a350f78fb8eb4 Mon Sep 17 00:00:00 2001
From: Reinhard Hutter <17421-hudri@users.noreply.drupalcode.org>
Date: Fri, 13 Oct 2023 10:22:28 +0000
Subject: [PATCH] Issue #3391596: Remove max-width from field description

---
 dist/css/base/gin.css        | 7 ++++---
 dist/css/components/tabs.css | 4 ++++
 dist/css/theme/dialog.css    | 4 ++--
 dist/css/theme/variables.css | 1 +
 styles/base/_form.scss       | 6 ++----
 styles/base/_layers.scss     | 3 ++-
 styles/components/tabs.scss  | 4 ++++
 styles/theme/variables.scss  | 3 +++
 8 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
index 9e9d23cfd..eae04e829 100644
--- a/dist/css/base/gin.css
+++ b/dist/css/base/gin.css
@@ -520,7 +520,8 @@ body:not(.toolbar-tray-open) .layout-container {
   margin-top: 0;
 }
 
-#system-clear-cache + #system-performance-settings {
+#system-clear-cache + #system-performance-settings,
+.gin-layer-wrapper + .imageapi-optimize-default-pipeline {
   margin-top: var(--gin-spacing-l);
 }
 
@@ -1780,7 +1781,7 @@ table td.field-plugin-summary-cell {
 
 .password-confirm {
   width: 100%;
-  max-width: 520px;
+  max-width: var(--gin-max-line-length);
 }
 
 .password-strength__title {
@@ -2139,7 +2140,7 @@ fieldset:not(.fieldgroup).error {
 
 .form-item__description,
 .fieldset__description {
-  max-width: 520px;
+  max-width: var(--gin-max-line-length);
   color: var(--gin-color-text-light);
 }
 
diff --git a/dist/css/components/tabs.css b/dist/css/components/tabs.css
index a82790911..97ad7bbd2 100644
--- a/dist/css/components/tabs.css
+++ b/dist/css/components/tabs.css
@@ -416,6 +416,10 @@
   margin-top: var(--gin-spacing-m);
 }
 
+.claro-details__description {
+  max-width: var(--gin-max-line-length);
+}
+
 .claro-details__summary::before,
 .claro-details[open] > .claro-details__summary::before {
   background: var(--gin-color-text);
diff --git a/dist/css/theme/dialog.css b/dist/css/theme/dialog.css
index dbf1c1107..19d0f0891 100644
--- a/dist/css/theme/dialog.css
+++ b/dist/css/theme/dialog.css
@@ -350,7 +350,7 @@
 
 .ui-dialog .password-confirm {
   width: 100%;
-  max-width: 520px;
+  max-width: var(--gin-max-line-length);
 }
 
 .ui-dialog .password-strength__title {
@@ -709,7 +709,7 @@
 
 .ui-dialog .form-item__description,
 .ui-dialog .fieldset__description {
-  max-width: 520px;
+  max-width: var(--gin-max-line-length);
   color: var(--gin-color-text-light);
 }
 
diff --git a/dist/css/theme/variables.css b/dist/css/theme/variables.css
index 192fd6c05..fc79be561 100644
--- a/dist/css/theme/variables.css
+++ b/dist/css/theme/variables.css
@@ -97,6 +97,7 @@
   --gin-offset-x: var(--gin-toolbar-x-offset);
   --gin-offset-y: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset));
   --gin-link-decoration-style: dotted;
+  --gin-max-line-length: 80ch;
 }
 
 @media (min-width: 61em) {
diff --git a/styles/base/_form.scss b/styles/base/_form.scss
index 8b350bcef..db332bcc3 100644
--- a/styles/base/_form.scss
+++ b/styles/base/_form.scss
@@ -1,5 +1,3 @@
-$maxWidth: 520px;
-
 .form-element {
   color: var(--gin-color-text);
   background-color: var(--gin-bg-input);
@@ -60,7 +58,7 @@ $maxWidth: 520px;
 
 .password-confirm {
   width: 100%;
-  max-width: $maxWidth;
+  max-width: var(--gin-max-line-length);
 }
 
 .password-strength {
@@ -406,7 +404,7 @@ fieldset:not(.fieldgroup) {
 
 .form-item__description,
 .fieldset__description {
-  max-width: $maxWidth;
+  max-width: var(--gin-max-line-length);
   color: var(--gin-color-text-light);
 }
 
diff --git a/styles/base/_layers.scss b/styles/base/_layers.scss
index d4ad15b6f..cc2b90d88 100644
--- a/styles/base/_layers.scss
+++ b/styles/base/_layers.scss
@@ -60,7 +60,8 @@
   }
 }
 
-#system-clear-cache + #system-performance-settings {
+#system-clear-cache + #system-performance-settings,
+.gin-layer-wrapper + .imageapi-optimize-default-pipeline {
   margin-top: var(--gin-spacing-l);
 }
 
diff --git a/styles/components/tabs.scss b/styles/components/tabs.scss
index e43af0028..d058d623a 100644
--- a/styles/components/tabs.scss
+++ b/styles/components/tabs.scss
@@ -343,6 +343,10 @@
   }
 }
 
+.claro-details__description {
+  max-width: var(--gin-max-line-length);
+}
+
 // Icon
 .claro-details__summary::before,
 .claro-details[open] > .claro-details__summary::before {
diff --git a/styles/theme/variables.scss b/styles/theme/variables.scss
index 77ccb0b3e..652f81814 100644
--- a/styles/theme/variables.scss
+++ b/styles/theme/variables.scss
@@ -153,6 +153,9 @@
 
   // Links
   --gin-link-decoration-style: dotted;
+
+  // Max line length
+  --gin-max-line-length: 80ch;
 }
 
 // Density spacings
-- 
GitLab