Claro theme + field_group seems to hide content of dropbutton

Applied patch #29 applied successfully in drupal-10.1.x-dev.
For ref sharing screenshots. Can be moved to RTBC.
RTBC +1

#29 introduced a new solution but it does not reflect the issue summary.

Also once 1 set of screenshots have been added any additional screenshots of the same patch are considered duplicative work and don't receive credit. So please not more screenshots.

Updating attributions

Having taken a look at the D9 patch above, it seems that there's a simple way of amending the styling without changing much else by removing a couple of things.

Please see attached patch for 9.5.x

After the patch #36, paragraphs still go out of container.

After patch #36, paragraphs still go out of container.

@acemichael your last screenshot is likely caused by a wysiwyg-editor (although it is not visible in your screenshot). This patch for the ckeditor5 will fix the overflow issue.

Don't think we should be patching the ckeditor library.

Also is this reproducible in core?

I did testing with #36 using the scenario in the original post as well as testing other areas with vertical tabs (account settings, text format settings, content type settings, media type edit, block layout settings) and with some other modules that use vertical tabs (google_tag, entity_embed text format settings, chosen, slick). It seems to work pretty well.

#37 might be more paragraphs related. It may have to do with paragraphs setting a specific size attribute on text fields which goes beyond the container if the screen size is small. But I'd rather see that paragraph content overflow the container so I can actually see the whole thing rather than it get cut off.

Regarding the patch in #40, if there's a vendor library to fix, those fixes should probably go in the vendor's issue queue instead.

I tried checking for vanilla cases and am unsure if the issue can be replicated without contrib help or custom code. But the issue of vertical tabs hiding overflow does stem from Claro. By comparison, it doesn't look like accordions hide overflow. The issue may not affect vanilla, but it does impact certain contrib modules like in the original scenario.

There are multiple patches and MRs that need to be cleaned up now, solution doesn't fully match what's proposed.

Before/after screenshots should be added to the issue summary.

I tried to apply some of the patches which are mentioned above on the latest Drupal version 11 but the patch threw some errors.
So I use the recent MR 5376 which has been applied cleanly and the hidden dropdown of a paragraph is now completely visible but the whole paragraph section is going out of the container which needs to be inside the parent container. See -

Before Patch

After Patch

I think for the paragraph section issue which is going out of the container will fixed in this - https://www.drupal.org/project/drupal/issues/3145188 🐛 Paragraphs fields cause overflow of content forms in Claro Needs work (similar issue)

Moving to NW based on the after screenshot, I see that the content is now breaking out of the container.

I tested the solution again on 11.x and I am not able to replicate the issue mentioned in #48. Please find the screenshot attached

I tried with recent 2-3 patches along with MR from @ameymudras. I can say that it's not fixing the issue for nested paragraphs.
I can think of 2 solutions:

1. If we need to fix this issue in Claro theme: increase the available area of the content edit form (i.e. layout-region--node-main) and make it 100%, so that paragraphs can accommodate properly in it. The reason is that nested paragraphs are being placed in <table> tag. These table tags have a width of 100% and which is overflowing outside the available area.

2. As in most places <table> creates such overflow issues. It will be great to change the structure of nested paragraphs by using other tags than the <table> tag. And restructure it. I know this is a very time-consuming solution that needs to be handled at the Paragraphs module level.

Removing overflow: hidden; will lead to more bugs than solving unfortunately.

The culprint of the issue is that the dropdown is not context aware (it opens towards the bottom instead of the top).
So to fix this more generally as it can also happen on other layouts like in tables we should solve the problem around the dropdown itself.

I haven't tried on 11 yet, but on 9 and 10 the issue was more than just the drop downs. It would occur for tables and other fields that get pushed out of view. The fix should be more general to cover all cases, not just a drop-down fix.

The patch #29 is not working with 10.2.0 release. The code on line 275 is significantly changed.

Rerolled patch for the compatibility with 10.2.2 release.

Hello there,
I've faced the same issue on my D10 instance and looked for the issue and landed upon another issue which seems to be stating this as an issue of Claro theme or the Paragraphs module, but after digging up quite a bit and trying it out with all possible combinations of theme and paragraphs module and field group module, it has come to by notice that the problem is neither with any of the themes nor with the paragraphs module, rather the issue is arising because of field group module.
I've talked about this elaborately there:
https://www.drupal.org/project/field_group/issues/3318730 🐛 Drop button cut off at bottom in Field Group vertical tabs Active
https://www.drupal.org/project/field_group/issues/3318730#comment-15551915 🐛 Drop button cut off at bottom in Field Group vertical tabs Active
Also attaching the same screenshots here for quick reference

On my observation the issue starts from the disappearance of the dropdown button itself and some structural changes which is happening because of the field group module. I'm not changing the issue component as there is already an issue with the same, so just adding that as a parent issue and related issue. I think it'll be better if we mark this as a duplicate issue as we're trying to address the same on
https://www.drupal.org/project/field_group/issues/3318730 🐛 Drop button cut off at bottom in Field Group vertical tabs Active
If you land on any other findings feel free to change accordingly. Though updated the issue summary with my latest findings for a quick overview!

Also not sure how you're reproducing the issue on D11, cause I found that these said modules are not yet ready for D11.

Number #58 worked for me! On Claro, drupal 10.2.6 and with field group module 8.x-3.4 , much thanks! @vdovhaliuk

Rerolled patch #58 for 10.2.6 release.

Fixed incorrect line in details.pcss.css from patch #58.