Dropbutton list size and content not consistent

I rerolled the alpha3 patch for the alpha4 version.
AFAIC, this patch works fine, I'm updating this issue to needs review, but I don't think I can do it myself though

Removed point 2. since it's duplicate to #3067697: Dropbutton breaks when text is split to multiple lines.

I rerolled the patch for 1.0-beta1. Although I have next to no idea what this patch actually does, so if someone could review it that would be top, thanks!

@Svitlana and me are starting to look into this issue on DrupalCon Amsterdam.

we are starting to reapply the last patch after it got moved to the core.

We had to reapply the patch from #14, because claro has been moved to core.
Here is the new patch.

I have tested the patch from #19, and it looks like it works. The dropdown is not jumping anymore.
I have added a screenshot to the issue summary too, so that it can be seen how it looks like with the latest patch.

+++ b/core/themes/claro/css/src/components/dropbutton.css
@@ -433,10 +439,24 @@
-.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+/**
+ * Hide the list items of dropdown before JS is loaded to prevent seeing an
+ * open list of items when page is loading.
+ */
+
+.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
   display: none;
 }

Well, this makes secondary dropbutton actions inaccessible (unvisible and unfocusable) without JS. Why did this have to be changed?

Re #24:

Core uses javascript for improving UX, and not for providing the functionality.

Re #23 and #25:

Original issue was about jumping dropbutton when list is opened, so now it should be fixed. Also reverted some code back to unblock issues from 23 and 25 comments.

Tested in Chrome, FF, Safari and IE for desktop and mobile resolutions and result is OK

This would be a minor-only change. Since 8.9.x and 9.0.x are now in beta, I'm moving this to 9.1.x. Thanks!

I'd want @lauriii's review here to commit this.

Before:

After:

Good change!

Thank you for all the work on this issue! I discussed this issue with @ckrina and we agreed that we probably shouldn't make this change since this doesn't work well in some use cases. For example, the media types page looks like this:

The dropbutton element has always worked like this and this same problem exists in Seven. We agreed that the right solution for this is solving #1899236: Add new Splitbutton render element to eventually replace Dropbutton.

Reroll for 9.4.