Input buttons in an expanded dropbutton in a table are too short

@VladimirMarko I confirmed the bug, but unfortunately we cannot change stable per https://www.drupal.org/docs/8/core/themes/stable-theme:

Stable theme is designed to be a fence for backward compatibility. The Stable theme markup and CSS will not change so any sub-theme of Stable will know that updates will not cause it to break.

How about we override the selector in Seven's css instead in seven/css/components/dropbutton.component.css with the correct value?

@Vladimir Cheers, your change looks great!

Some screencaps for good measure taken with the Paragraphs contributed module:

Dropbutton before:

Dropbutton after:

+++ b/core/themes/seven/css/components/dropbutton.component.css
@@ -46,6 +46,9 @@
+.js td .dropbutton-multiple .dropbutton-action input {

Could this bug exist elsewhere than inside a td element? Is there some problem if we would apply this more globally than just for dropbuttons inside a td?

Re #8
This was actually the approach in #2: fix the specificity of the selector in Stable. However, since the css for Stable is supposed to be frozen, we changed the approach in #4

The specificity is required to override the selector in Stable, see the patch in #1

Started poking around this, looks like the styling in question was originally introduced in #1989470-171: Dropbutton style update for Seven before being moved to Stable.

CSS-a-licious.

I'm very sorry that it took so long for me to revisit this issue. Thanks @idebr for the explanation. That totally makes sense.

I think we should make a bug fix for this, but most likely it could be slightly more generic bug fix than this. The current solution only fixes the bug for input elements, but at least while reading the CSS it seems like we support button elements as well. Here's a demonstration how inconsistent the behavior of the width: auto is between these elements.

This should really be consolidated with the linked issue!

Patch #4 failed to apply on 9.1.
re-rolled the patch.

#21 patch is apply sucessfully on 9.1.x and I have check this with paragraph module. Adding after and before screenshot. I have check on IE, Firefox and chrome, it is working fine.

Thanks for rerolling the patch and the manual testing!

Just a few more things to do here.

The patch has coding standard errors, https://www.drupal.org/pift-ci-job/1794488.

There is a request in #14 to make this fix more generic. The reroll is from a patch before that comment

Setting NW to address the above.

And let's add before and after screen shots to the issue summary. That will help reviewers.

Thanks

Thank you for the review @quietone!

I rechecked this and the bug is indeed specific to tables which is very confusing. That means, my feedback in #14 is not relevant.

The coding standard violations pointed out by DrupalCI are from CSSLint which is not used by Drupal core anymore since https://www.drupal.org/node/2868114. Moving back to RTBC

Hmm, probably what I was actually looking for in #14 was if we could remove this rule from core/misc/dropbutton/dropbutton.css:

.js td .dropbutton-multiple .dropbutton-action a,
.js td .dropbutton-multiple .dropbutton-action input,
.js td .dropbutton-multiple .dropbutton-action button {
  width: auto;
}

This was added in #2282599: Dropdown menus in most of core are broken in Stark but I don't think it's needed anymore.

@lauriii as per you've mentioned I've made that change.

Tested #27, code changes are reflecting along with FE change

The Seven theme has been removed from Drupal 10 core. However, moving this to core CSS as per #26.

I have checked the issue without applying patch.I am not able to get the issue.
I checked this in drupal10.1.x-dev version with using seven theme.
For refer attached screenshots.

Verified this issue doesn't exist in 10.1.x with Claro (Seven is no longer in D10)

Closing this as outdated. Screenshot attached (note I manually modified the markup in devtools to test the CSS).