Claro theme + field_group seems to hide content of dropbutton

@Hikkypo i didn't get any issue regarding this for reference sharing screenshot ....

Hi @Hikkypo i haven't checked the issue yet, but from a quick review of your patch, i can see you have directly done the changes on claro/css/components/vertical-tabs.css this file. Here you have to done your changes on claro/css/components/vertical-tabs.pcss.css then compile the file then add your patch here.
Changing the version to 9.3.x-dev (if the issue is not with 9.3.x-dev then please change the version back) and moving to NW.

Hope this will help you. Thanks.

#7 Please review the patch

As mentioned in #6 this will create a white space on top of the details tab in size of the vertical tabs. The only way around this I found is using flexbox. But I guess this will open a box of a lot of work and testing, as I see those LTR and RTL comments. I attached a simple patch as PoC.

I just confirmed this is still an issue on 9.3.x. There are a number of other issues related to vertical tabs in Claro that have been fixed recently, but this one is still present.

Re-rolled patch #8, Attached interdiff for same. Please review.

Thanks for the updated patch. It applies cleanly to 9.3 and 9.4 but not to 10 (see below). This needs manual testing for 9.3 and 9.4 and a separate patch for 10.

[drupal-10.0.x-dev/10.0.x] [drupal-10.0.x-dev]$ patch -p1 < 3217868-12.patch 
patching file core/themes/claro/css/base/variables.pcss.css
patching file core/themes/claro/css/components/vertical-tabs.css
Hunk #1 FAILED at 18.
Hunk #2 FAILED at 38.
Hunk #3 FAILED at 306.
Hunk #4 succeeded at 342 (offset -1 lines).
3 out of 4 hunks FAILED -- saving rejects to file core/themes/claro/css/components/vertical-tabs.css.rej
patching file core/themes/claro/css/components/vertical-tabs.pcss.css
Hunk #1 succeeded at 10 (offset -2 lines).
Hunk #2 succeeded at 29 (offset -2 lines).
Hunk #3 succeeded at 276 (offset -2 lines).
Hunk #4 succeeded at 312 (offset -2 lines).

Re-rolled #13 for 10.0.

Thanks for the patch for D10.

Needs manual testing for:

• Drupal 9.3 and 9.4 using patch from #13
• Drupal 10 using patch from #16

Updated the issue summary based on recent information and cleaned up wording and formatting.

Re-rolled the patch to work with Drupal 9.5.x Refer the latest patch for Drupa 9.x version. For the D10 refer #16

Verified and tested patch#20. Patch applied successfully on 9.5.x-dev.

Test Steps:
1. Install modules: paragraphs, field_group and claro (theme)
2. Enable Claro theme
3. Apply patch
4. Create few paragraphs type (about 3-4).
5. Create a content type with a paragraph reference field. Make it so all paragraphs are selectable.
6. Add a field_group tabs (vertical)
7. Add a tab and put the paragraph field created in step 2 under this tab.
8. Goto create content page and try to select paragraph 4.

Test Result: Able to select items in the Paragraph dropdown.

Before Patch:

After Patch:

RTBC +1

@sonam.chaturvedi Thank you for testing!

We still need code review by a frontend developer and check of core gates but...

we do not need any additional testing.

Thanks :)

I have checked the issue without applying patch in drupal 10.1.x-dev.
Its working fine, looks good for me.
For refer screenshots:-

Checking the account settings page, it seems to squish things too much.

This patch on 10.1.x tries a slightly different approach.

Tested #29 on account settings and this issue's paragraphs example.

Verified and tested patch #29 on 10.1.x-dev with Claro + field_group.
Patch applied cleanly

The issue got fixed after applying the patch.
Refer to the attached screenshots

Before patch:

After patch:

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. The patch is a minified JS so excuse the readability but I changed the flex-wrap:nowrap, to flex-wrap:wrap for the .ck-toolbar__items.

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 (similar issue).

Issue summary updated with the latest solution and screenshots.

Thanks!

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. The main dropdown issue gets fixed.

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.

So we should move this issue just for dropdown-related changes, and fix the nested paragraph overflow issue in different issue.
There is already an issue for it.

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
https://www.drupal.org/project/field_group/issues/3318730#comment-15551915
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
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.