From 92e3e659ea47b8bb3b95687ecc8c4935ffdb793b Mon Sep 17 00:00:00 2001
From: Cristina Chumillas <ckrina@1206650.no-reply.drupal.org>
Date: Tue, 25 Jan 2022 12:27:38 +0100
Subject: [PATCH] Issue #3168326 by mherchel, rikki_iki, Sakthivel M, ckrina,
 bnjmnm, vikashsoni, darvanen, lauriii: Dropbuttons in table cells are
 potentially unusable if it includes options with long text length

---
 core/themes/claro/css/components/dropbutton.css      | 6 +++++-
 core/themes/claro/css/components/dropbutton.pcss.css | 7 ++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 7556948a02d..db2beb423ec 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -326,7 +326,7 @@
 }
 
 .js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
-  display: none;
+  visibility: hidden;
 }
 
 /**
@@ -352,6 +352,10 @@
  * Dropbutton items of non-first dropbutton list elements.
  */
 
+.dropbutton__item:first-of-type ~ .dropbutton__item {
+  max-width: 12.5rem;
+}
+
 .dropbutton__item:first-of-type ~ .dropbutton__item > a,
 .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
   position: relative;
diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css
index 9fd1754ecdd..3af96a50564 100644
--- a/core/themes/claro/css/components/dropbutton.pcss.css
+++ b/core/themes/claro/css/components/dropbutton.pcss.css
@@ -20,6 +20,7 @@
   --dropbutton-border-size: 1px;
   --dropbutton-toggle-size-spacing: var(--dropbutton-border-size);
   --dropbutton-border-radius-size: 2px;
+  --dropbutton-item-max-width: 12.5rem;
   /* Variant variables: small. */
   --dropbutton-small-spacing-size: 0.625rem;
   --dropbutton-small-font-size: var(--font-size-xs);
@@ -312,7 +313,7 @@
 }
 
 .js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
-  display: none;
+  visibility: hidden;
 }
 
 /**
@@ -336,6 +337,10 @@
 /**
  * Dropbutton items of non-first dropbutton list elements.
  */
+.dropbutton__item:first-of-type ~ .dropbutton__item {
+  max-width: var(--dropbutton-item-max-width);
+}
+
 .dropbutton__item:first-of-type ~ .dropbutton__item > a,
 .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
   position: relative;