Dropbutton has no space to the RHS and its highlight covers adjacent text

Patch fix created.

Hi @edyuenyw, the patch applied successfully and it's working fine for me. Here's the before and after screenshot.
RTBC ++

+1 RTBC, applied patch and it's working as described

this is not the result I'm seeing, I can reproduce the problem, but the patch results in also adding margin-top and the text is then aligned on top of the button, not the center. I'm also missing spacing between the to and the paragraph field name. What theme is that?

@Berdir This is occurring in Claro.

Hi,
I have made necessary changes by adding apace beside the dropdown and created a patch in drupal 9.5.x. I have attached the patch and the interdiff file. Please review the patch and let me know.

Attached are videos showing the issue on fresh installs of both Drupal 9.5 and 10.1 and then testing both patches in this issue. I could not see a difference between the patches on either version of Drupal and I certainly didn't see the problem @Berdir mentioned.

As far as I'm concerned either patch works perfectly fine, but I'm really confused by Berdir's comment re: spacing problems. Someone even minimally familiar with this project's CSS should make the decision on which patch to apply, but FWIW I've been using the first patch on a project for a few months now and have not noticed any issues.

I'll mark this RTBC and a maintainer can make a final decision.

Correction:

It does seem that the 2nd patch addresses this issue better than the 1st one, since it appears the 1st patch also inadvertently affects single-paragraph-type buttons without the dropdown.

1st patch:

2nd patch:

You'll see the 1st patch adds undesired extra margin to the right of the button.

For the record, these patches seem to cause minimal changes/disruption in Seven, per the attached screenshots. The only downside to Patch #9 is that it adds more margin to multiple-item dropbuttons than it does to single-item dropbuttons, but this should be an okay trade-off when considering the theme is deprecated.

That said, other admin themes may end up seeing the same thing, so perhaps this is a Claro core issue where the right-hand spacing for multi-item dropbuttons is nonexistent compared to single-item buttons.

The actual issue appears to be that in Claro, the widget is given the form-actions class which makes the entire thing a flex container. This causes every DOM node in the widget -- the button, the word "to," and the <em>phasized text -- to be considered an independent flex item with no gap between them. I tried column-gap but this put much more spacing after the word "to" than before it (i.e. after the button) even after removing the margin for .placeholder

I think we should ensure block display of form-actions for the paragraphs widget to avoid the issue and ensure consistent spacing between themes. This also means we can get rid of some of the other Claro-specific CSS rules. Screenshots of Claro and Seven with this patch applied.

Tested patch from #15 in D9.5. It applies cleanly and fixes the margin issue in themes like claro and olivero. In seven theme issue wasn't there, so patch doesn't affect it much.
This ticket can be moved to RTBC + 1.

Tested #15 with the Claro theme on Drupal 10.1 and 10.2.
It looks good and does only apply the margin to single-item buttons.

I think this was at least a partial duplicate of 📌 Some styling no longer applies due to form-actions -> field-actions html change Fixed , this issue was older, but I went through the other one first. Please test if anything still needs to be fixed.

I tested this on Paragraphs dev and it looks fixed. Thanks!