Paragraphs stick out from the edge

Reproduced the issue on local and find out that it's will be happen only when screen dimension are between 1024px to 1250px (around). otherwise on other screen it's looks fine, create a patch Paragraphs-stick-out-from-the-edge-3348101-2.patch. for this issue.

Testing Steps:
1. Install the Drupal 10.0.x version.
2. Install and set Gin Admin Theme.
3. create and apply the patch.
4. Clear the cache and reload the page.

Testing result: Need review
Paragraphs stick out from the edge.

Moved the issue to Need Review.

I have updated the patch with SCSS(source) file. please review and verify the patch.

#4 Sorry, but the patch didn't work for me, didn't fix the issue. It looks the same as before

#saganakat I tried again and it's working, can you please share the steps, Drupal version and output screenshot.

Hello #Santosh_Verma.

I have followed the following steps to apply the patch on a Drupal site 9.5 with the latest Gin version:

1. Apply patch with composer
2. I have cleared cache with drush cr
3. I'm going to 'Content -> Edit'
4. I edit a content that contains a paragraph with a vertical menu
5. The paragraph overhang the edge

Same issue. Patch is not working. Drupal 9.5.7. See screenshot:

Hi markdc → ,
On MAC Paragraphs-stick-out-from-the-edge-3348101-2.patchpatch. it's working fine on all the screen sizes. added a video (paragraph.mp4) on before and after patch apply and effects on issue.

I just tested the patch on a current site setup with D9 / ckEditor5 (currently planning an upgrade) and the issue still persists.
As already mentioned by @markdc the patch is only working for screen sizes smaller than 1274 pixels..

This css seems to work on all screen sizes:

td .claro-details {
width: 100%;
min-width: 100%;
}

.paragraphs-tabs-wrapper .field-multiple-table > tbody > .draggable > td + td, .js .field--widget-paragraphs .field-multiple-table, .field-multiple-table thead, .field-multiple-table tbody {
display: block;
}

.paragraphs-tabs-wrapper .field-multiple-table tr.draggable {
display: flex;
align-items: center;
}

The issue can be solved with the patch provided in 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 Needs work .

I think we can mark the ticket as Closed (duplicate).

FYI the patch above works better than the core patch:

Patch #4:

Core patch:

While patch #4 is good, it isn't perfect, so nested paragraphs still has problems:

I found a solution to solve this issue, I am using Drupal 9.5 with the Gin 8.x-3.0-rc6 version please help me review

Re-opened this issue because 🐛 CKEditor 5 toolbar items of multi-value field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form's sidebar on wide viewports Needs work does not fix things for nested paragraph widgets.

I changed the line 76 of patch #16 🐛 Paragraphs stick out from the edge Needs review to prevent the broken paragraph display on content translation pages.
I limit the forced size to .delta-order only instead of the too generic :last-child.

Tested the #18 on a Drupal 10.1.6 / Gin 8.x-3.0-rc7 site and it works well for me. It looks good on all screen sizes used by editors.

Unfortunately I see that a table inside the editor is now collapsed.
Unfortunately I see that a table inside the editor is now collapsed.
Before applying the patch:

With the #18 patch applied.

Hi,
Thanks @corentin.crouvisier
Patch #18 works for me !

Just a warning for users of the paragraphs_features or paragraphs_ee module: the change breaks the rendering of the quick-add buttons between paragraphs.

Before :

After :

But this will surely be addressed in the modules concerned once this fix has been validated.

I've created a issue fork for easy merging once everything is reviewed.

I've added a fix for the problems @Johan was experiencing with the Tables.

Hello, I've added this code snippet to Patch #18 to maintain the table structure inside ckeditor

.ck-content {
  table,
  .table {
    thead {
      display: table-header-group;

      tr {
        display: table-row;

        th {
          display: table-cell;
        }
      }
    }

    tbody {
      tr {
        td {
          display: table-cell !important;
          width: auto !important;
        }
      }
    }
  }
}

This patch is breaking ckeditor tables for us as
.paragraphs-tabs-wrapper .field-multiple-table tr.draggable td is overriding the styles

Have you tried the solution for tables in the #26 MR?

Patch #26, conflicts when i use paragraphs_previewer. I get the following result:

I am able to fix this by changing the box-sizing rule:

td .claro-details {
  box-sizing: border-box;
}

To avoid creating a sub-theme I attach it in a module:

/**
 * Implements hook_page_attachments()
 */
function MODULE_NAME_page_attachments(array &$attachments) {
  if (\Drupal::service('router.admin_context')->isAdminRoute()) {
    $attachments['#attached']['library'][] = 'MODULE_NAME/admin-theme';
  }
}

I updated the patch #18 🐛 Paragraphs stick out from the edge Needs review to fix the issue with tables in the editor, please help me review

@alexis_mc did you try the solution from the #26 Merge request for the tables.
What are the changes (interdiff) between your patch and the #18 patch?

#26 also breaks widgets of paragraph_table module similarly to #30

#32 breaks less markup on the page comparing to #26 or without patch at all

I've updated the merge request and added a change for the draggable tables handle. they added a min-width but in some cases this breaks nested paragraphs. Still have to look into the issues from #30 and #34.

Here is the example of the issue:

I've found the issues with paragraphs previewer mentioned in #30 and adjusted the MR for it.

I also saw that @alexis_mc had a change for the &:last-child statement to change it to &:delta-order. I've added this as well.

Unfortunately I currently don't have a site with paragraphs_table to check the issue in #34, so i'm currently unable to test this. If i find some time i will create a test environment for this. Otherwise it would be best if someone else could look into this as well.

MR looks much better now. Thanks for the update.
#34 contains steps to reproduce the issue with table. But I'm not sure that is the scope of that issue. Paragraphs widget with nested paragraphs with changes from MR looks much better comparing to current gin version.

Reproduced the issue on local and applied MR #38.
Testing Steps:
1. Install the Drupal 10.2.1 version.
2. Install and set Gin Admin Theme.
3. Applied the patch.
4. Clear the cache and reload the page.

Result:-
After patch issue resolved for the small screen of desktop, but when i check bigger screen of desktop it's created extra blank space.

Before:

After:

Replicate new issue after applied patch
No Issue before patch

Issue after patch

Yes, .paragraphs-tabs-wrapper .field-multiple-table > tbody > .draggable > td + td needs more attention for nested widgets and tables.

@voleger same result which i find in #9.

Result:-
After MR the issue resolved for the small screen of desktop, but when i go to the big screen of desktop it's created extra space.

AFter MR #40

I just fixed the table thead styling. There are no changes related to td + td style.
In #40 I confirm that there is still the issue with td + td styles.

Fixed the paragraph styling issue. In drupal 10.2.1 version additional empty <td> in <tbody> <tr> being render which is causing the design break. Attaching the screenshot for the reference. After removing the empty <td> the paragraph design is not breaking for all screen resolution.

The current Gin dev release with core 10.2.2 and the merge request currently looks like this:

I think it needs some more work.

@DamienMcKenna On which screen size are you checking?

I have tested MR! 339 everything looks fine at my end. The layout overflow issue is resolved now.

Tested till 1024px screen

I tried this patch and works well.
But I had the same issue as #45 on a 1400px width when the sidebar is shown:

There is no issue is the sidebar is hidden.

Setting back to NW due to #47.

Patch #18 works for me EXCEPT for line 25 of `/gin/styles/components/paragraphs.scss`. When updated to `weight: unset`, all is good.

Using the lastest MR 339 we cannot set the row weights anymore.
Also the drag and drop options seem hard to click for users.
The drag and drop option that shows the drag and drop view, not the usuals drag handles, those work fine.

@K L Dickenson, i guess you mean

.paragraphs-tabs-wrapper .field-multiple-table > tbody > .draggable > td + td {
  width: unset;

I've tested MR 339 it works fine if i add
.paragraphs-tabs-wrapper .field-multiple-table > tbody > .draggable > td + td {
width: 95% !important;
}

Jose Diego Junquera → made their first commit to this issue’s fork.

I have developed a patch incorporating all the changes from MR 339, along with the suggestion provided by ericdsd in comment 52. This addresses the issue we faced where reducing the screen size resulted in the sidebar obscuring the content of administration fields and the CKEditor. Combining the solution from comment 52 with MR 339 effectively resolves the problem.

there is still overflow issue after my test even after using the patch file

The overflow issue was caused by .shortcut-action__message. After applying the following CSS to hide it, everything is now functioning properly:

.shortcut-action__message {
  display: none;
}

MR 339 worked for me, thanks

Just to mention it, patch #54 is working well for me on Gin 3.0-rc10, thanks everyone!

+1 on the MR resolving the issue, although the large padding on the nested elements does mean that you can quickly run out of usable edit space: might not be something to resolve in this issue though.

Hi @MrDaleSmith
i get your point but i really suggest that you create a new issue for that as it is not really a bug but more a a design choice to optimize. The important here is to make that long standing issue complete so that we can work on optimizing the rest upon a working base.

I see that your capture is a bit an extreme case with 6 nesting levels, but i agree that we shall optimize it but it deserves its own issue IMHO.

Note that patch from latest MR also applies fine to Gin 1.0-rc11.

Seems if you turn off table drag and turn on manual row weights, this patch flexbox causes an issue. Pushed a fix for that here.

Before fix:

After fix:

The current state of the MR still causes some layout issues, as described in 🐛 Multiple image widget inside paragraphs widget looks broken Closed: works as designed .

I think Mrshowerman is probably right targetting > td:nth-child(3) will necessarily generate side effects either now or later.
Don't you think we could juste remove this part for now in order to have the main part of the fix committed, else it will never get into any release and it looks like a new release is close to arrive.

Tried to fix the column widths for all possible cases, bringing back the "Remove" buttons in multi-value fields. Also took care about the manual row weights and tidied up the CSS code a little.

I hope this gets us closer to a commit and doesn't introduce more issues.
Didn't look into 🐛 Multiple image widget inside paragraphs widget looks broken Closed: works as designed though; @dieterholvoet, is this still an issue?

@u_tiwari, can we please concentrate work on one single branch/MR?
The new one doesn't contain my changes from two days ago, and it makes life for reviewers much easier if they don't have to decide which branch to check.
Thank you.

I agree with mrshowerman, as we really need to reduce the scope of the issue and the pain points for review if we want to have this issue fixed.
Once released we'll then be able to address optimizations and will be happy to test any MR from a new issue based on merged code.

mrshowerman → changed the visibility of the branch 3348101--paragraphs-stick-insead to hidden.

Okay, I think we should get back to reviewing MR!339.
@u_tiwari, I set your branch to hidden for the sake of clarity. If there are any issues left we should add fixes to the existing branch.

When testing the MR339, I've encountered a side effect I think.

When you have a paragraph "wrapper" ie a paragraph that allows other paragraphs inside of it there's an issue with the dropdown box where you can select them. See the enclosed screenshot.

https://www.drupal.org/files/issues/2024-09-27/dropdown-issue.png →

the culprit is this line of css:
[dir="ltr"] .node-form .dropbutton .dropbutton__items {
left: 0;
}

it should be left:auto IMO.

@selfirian, that looks very much like the bug fixed in 🐛 contents of dropdown button go to the left and can be off the visible page RTBC .
I've rebased the MR so we have the change here as well. Can you test again?

@mrshowerman, when can we expect v3 to release? I have this same issue, making it hard for my team to add content (over 20 paragraphs *hides* lol)

Thanks for all the work!

I am not the maintainer of this module.
I'm just trying to push a few issues forward that are affecting us in some projects.

@mrshowerman
I was still able to reproduce the issue, by adding 8 levels of wrapping paragraphs. I doubt this will ever happen for any real life use cases... as a fallback for such an extreme case I'd say that the easiest way to mitigate this issue is to set
.field--widget-paragraphs {overflow-x: scroll; }
But that feels like something that would have side effects

Indeed.
As @ericdsd has already pointed out, let's try to keep the scope of this issue as small as possible. You can still create a follow-up issue for that special case.

In that case I didn't encounter the initial issue during my tests.

Merge conflicts. We need to reroll.

Rebased. Back to RTBC.

isn't that the same issue as it was fixed in 🐛 contents of dropdown button go to the left and can be off the visible page RTBC ?

@agoradesign, part of it yes, see #77.

Glad to hear it's RTBC, let's get it merged so that we can go back to our lives :p

Also tested this patch over dev version and core 10.3.5 with success.

Thanks y'all for working on this. I left some code suggestions and found some bugs 👀

Applied code suggestions and removed a line of code that I think is unrelated.
Back to review for @saschaeggi.

@mrshowerman, i've tested your changes with success, it works like a charm, thank you for your fast move.

One question left to the removed code (see https://git.drupalcode.org/project/gin/-/merge_requests/339#note_396145)

When we can verify that this is not needed to fix this issue we can move ahead 👀

Thanks again!

@saschaeggi, see my comment on the MR. Leaving status change up to you.

Thanks y'all for your patience and solution finding for this issue 🎉

Thanks everyone!

Automatically closed - issue fixed for 2 weeks with no activity.

This introduced an issue with the pending 4x branch of Field Group, raised here: 🐛 Horizontal tabs are not horizontal with Field Group 4.x due to regression Active - should be easy to sort I think