Paragraphs fields cause overflow of content forms in Claro

Kindly review the attached patch.

Stack element is the best way to handle that issue on resizing(desktop to mobile) because on iPad(768 res) it's stack and iPad pro(1024 res) it's two-column. So it's better to handle it like an iPad stack design below 992 resolution.

Verified and tested by applying the patch #4 on fresh install of Drupal 8.9.0-rc1, paragraphs 1.12 with Claro theme enabled as an admin theme.It was successfully applied.

But found issues related to UI.Adding the screenshots below.

System -
MacBook Pro.

Browser -
Chrome and Safari

Steps to test -
1. Go to the admin site.
2. Go to admin/modules.
3. Enable the paragraph.
4. Go to /admin/appearance.
5. Enable the Claro theme.
6. Go to /admin/structure/types/manage/article/fields/node.article.field_example_paragraph.
7. Added a paragraph type with a text field to an article and save it.
8. Go to node/add/article.
9. Verify.

Added a paragraph type with a text field-

Found below UI issues -

On Adding a paragraph type with a text and image field-

On Adding a paragraph type with a nested paragraph -

@priyanka.sahni Thanks for your testing but this issue is related to paragraph section overlapping on the right sidebar when we are resizing from desktop to mobile and using a patch that will get resolved. About new issues which you found I think for that you need to create a separate issue. Also, re-check newly found issues are in latest claro theme(by downloading it) or not. https://www.drupal.org/project/claro

@kiran.kadam911 - Please find the attached screenshot for mobile view after applying the patch #4.

@priyanka.sahni Thanks again for testing but can you please test it When creating an article, and reducing the width of the browser(resize manually > 768 and < 992 resolutions) and see if it's working fine.

Hello @finn.lewis@gmail.com

About Claro:
I recheck the patch by applying again in drupal 8.9.x where claro is admin theme from core, Above 992 res showing two column and below 992 res it's stack and no overlapping of sections are happening, works fine on manual resizing also. Also pls check the size attribute value of input field on your local.
See the attached screenshot.

About Seven:
Inside tabs paragraph section comes with table. Issue https://www.drupal.org/project/drupal/issues/2937996 provided patch will resolve this issue generically for table form elements.

Thanks!

Tested the issue on desktop, responsive (768x992), and mobile view but the issue is only reproducible on mobile view on Seven theme only.

Applied the patch given in #4 and the pacth fixed the issue. Please refer to the SS attached.

Applied patch #4 successfully working for me
Thanks for the patch for reference sharing screenshot

+++ b/core/themes/stable/css/node/node.module.css
@@ -14,8 +14,7 @@
 /* Wide screens */
 @media
-  screen and (min-width: 780px),
-  (orientation: landscape) and (min-device-height: 780px) {
+  screen and (min-width: 992px) {
 
   .layout-region-node-main,
   .layout-region-node-footer {
 

Changing the media query of a very commonly used form to address a issue with the paragraphs widget is not something that will get accepted to core. This is a significant change to the node form experience. The solution needs to target the specific bug, not make broad changes to Drupal form styling.

In Drupal 9.x, core themes also no longer extend Stable, and 8.x no longer receives updates, so whatever the ultimate fix, it won't be in the stable theme anymore.

another related issue is #3112245: Cross for multiple entity reference field in paragraph

probably it needs fix for paragraphs as well

Hi,

Created a patch using media query for Paragraphs fields cause overflow of content forms in claro theme.

1. --- a/core/themes/claro/css/components/form--text.css
   +++ b/core/themes/claro/css/components/form--text.css
   

   CSS changes are made in .pcss.css files then transpiled to .css files. See https://www.drupal.org/docs/core-modules-and-themes/core-themes/claro-th... When this process isn't followed, DrupalCI will respond with "custom commands failed."

2. +++ b/core/themes/claro/css/components/form--text.css
   @@ -169,3 +169,10 @@ _:-ms-fullscreen,
   +/* Ipad screens */
   

   This phrasing suggests the styling is Ipad specific, but it's not targeting ipads, just a width range.

3. +++ b/core/themes/claro/css/components/form--text.css
   @@ -169,3 +169,10 @@ _:-ms-fullscreen,
   +@media screen and (min-width: 960px) and (max-width: 1099px) {
   

   Having a media query target only 139px seems really specific and is not a range used elsewhere. If this specific query is 100% necessary it should probably be accompanied by an explanation.

4. +++ b/core/themes/claro/css/components/form--text.css
   @@ -169,3 +169,10 @@ _:-ms-fullscreen,
   +  .field--widget-paragraphs input.form-element {
   

   .field--widget-paragraphs is a Class provided by the Paragraphs module. CSS changes to Drupal core should only include classes that are provided by Drupal core.

According to comment #23, added specific css to paragraph module and create a patch. And also added 1 breakpoint, not specific to iPad, only added for the broken window.

@Maninders, shouldn't that patch be for the paragraphs module and not core?

I am tested in drupal 9.5.x-dev, Its working fine without apply the patch with Claro theme enabled as an admin theme.Appears as expected.
(Added a paragraph type with a email field)
See Refer screenshot.

This is still an issue for me on latest release (9.5.1) and the fields look fine with theme "seven".

Claro

Seven

I have updated the patch into Claro theme and addressed comment #23. Please review

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 stop this overlap. They do prevent adding a paragraph containing CKEditor 5 from causing all paragraph sections to become super wide, though. I am am using Drupal 9.

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

@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
• #3375611: In edit, paragraphs overflow their container

(there might be more)

Regarding CKEditorthere is already an issue here: #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

Thanks @shweta__sharma !
#46 works for me on 10.5.7 with Claro, CKEditor 5, Field Group 8.x-3.6 (for tabs), and Paragraphs 8.x-1.19