Issue #3168326 by mherchel, rikki_iki, Sakthivel M, ckrina, bnjmnm,...

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

@@ -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;

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;