Paragraphs fields cause overflow of content forms in Claro

Verified and tested by applying patch #33. It doesn't look good. This is happening when the admin menu is open.
For ref sharing screenshots...

I have added a patch please review it.
For ref sharing screenshots...

I have applied #35 patch, it's overflow on mobile device when used Field type Text (formatted, long).
Attached screenshot for reference.

I have updated the patch and addressed comment #36. Please review it.
For ref sharing screenshots...

I mentioned this in #22 but the patches that follow continue to use .field--widget-paragraphs in the CSS. Claro (or anywhere in Drupal core) does not provide styling for selectors added by a contrib module. That solution can either be added to paragraphs instead of core, or create a module agnostic solution for Claro

Since this is also indeed a problem on Seven, can this fix be moved to the Paragraphs team to address, as a fix there should address it for all admin themes?

The Seven issue has been postponed due to Seven being moved to Contrib in D10, but that doesn't help those of us using it on D9 right now. We have content editor experience that does not want to move to Claro either, so it really seems like this should be addressed at the Paragraph level to fix it for everyone. No?

Hi, I am experiencing this issue too. The paragraph fields are overflowing on the right and overlap the menu.

I tried out the patches but they didn't work. I am am using Drupal 10.

If it was decided to move this issue over to paragraphs, did anyone ever raise an issue on their board? I can't find anything.

@RedNeko

This might be a different issue, not related to Paragraphs module, see

https://www.drupal.org/project/drupal/issues/3332416 🐛 CKEditor 5 toolbar items of multi-value field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form's sidebar on wide viewports Active

@sker101
Thank you for you suggestion, but the issue in my screenshot is not due to CKEditor. That version of the issue looks much worse!

#8 added to YMCA Website Services distribution ( formerly Open Y ) as it solves the issue
treat this as RTBC if needed

Agree with #38.

I think the "issue" comes from ckeditor itself.

The thing is, the toolbar is supposed to be wrapped under a menu when there is not enough room. For this reason, they might have forced flex-wrap: no-wrap on the toolbar.

With the following patch, you restore the behavior as it used to be with ckeditor 4:

I think this could be an option to add to claro theme.

Fixed the CCF in #45

Yep, thanks shweta, figured it out when rebuilding my project. Bug was still there ...

This issue doesn't seem to be directly related to Claro itself as it seems to happen as well in other admin themes of the like of Seven & Gin as I'm closing this.

Regarding Paragraphs there seem to be a couple of related issues open, see:

• #3161823: Paragraphs widget not constrained to container width in Claro →
• #3059737: On edit screen nested paragraphs go beyond the page width →
• 🐛 In edit, paragraphs overflow their container Active

(there might be more)

Regarding CKEditorthere is already an issue here: 🐛 CKEditor 5 toolbar items of multi-value field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form's sidebar on wide viewports Active