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 Active .

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 Active does not fix things for nested paragraph widgets.

I changed the line 76 of patch #16 🐛 Paragraphs stick out from the edge Needs work 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 work 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.