Paragraph reference overlaps with node's vertical tabs when expanded

@innoraftDebdeep

Just wanted to check if you are working on it actively then please keep it assigned to yourself otherwise you can change it to unassigned.

Yes I am working on it.

@Prashant.c
please mention your default and admin theme and also share your screen resolution.
As I have tried to replicate the issue using Olivero.

Just adding that I'm also experiencing this issue but on the Gin theme.

@Debdeep.Mukhopadhyay Claro is my admin theme and resolution is 1566x768.

Hi, any update on this? I'm also seeing this on a client's site using Claro and Drupal 10.3.2. Screen resolution is 1728 x 1117, and my editor page looks essentially like the one in the original post. Thanks for working on it.

I am wondering if this issue will go into the Claro theme. Because on the Olivero theme, it is displaying properly. So looks like a theme-specific issue to me.

I think this is specific to the Claro theme because in Olivero this works fine (it might be due to Olivero having a different layout for this).

I encountered a similar issue while working with the Carlo theme in Drupal 10.3.3. I resolved the issue using CSS.
.layout-region--main, .layout-region--footer {
width: 100% !important;
}
.layout-region--main .layout-region__content, .layout-region--footer .layout-region__content {
max-width: none !important;
}

.layout-region__content input.form-element{
width: 100% !important;
}

@amitrawat056
You can raise an MR with these changes and then the frontend experts can review these.

i tried to reproduce the issue but unable to do please check attachment.

changed the status to closed by mistake changed back to active.

I tested it with the gin theme also, this issue is not theme-specific or Paragraphs module specific, this issue is generic, Whenever the fields have very long text which increases the width of the fields and hence the overlap.

Hi,
i tried once again but got same result. i have attached video please and let me know if i am doing something wrong here.

@saurav-drupal-dev because #9 and #13 were also able to replicate this so this issue is present, which Drupal version are you using to replicate this, and are you on fresh Drupal installation?

I have reviewed the issue with the Gin theme as well. On smaller viewports, the form elements are overflowing, as demonstrated in the video above. To resolve this, you can set the .form-element width to 100%, which will fix the overflow issue, similar to how it’s handled in the Carlo theme.

Actually issue is with body field when we are configuring multiple body field whether it is with paragraph or not.

Problem: When we are using single body field ckeditor dropdown button will appear if toolbar has more plugins enabled.

but if we enable multi field for body that time table tag <table></table> will added and downdown button feature is not added for toolbar which leads to expand the toolbar to the right side.

Simple Solution: add below css on your custom module that will work like magic.

.ck.ck-toolbar.ck-toolbar_grouping>.ck-toolbar__items {
    flex-wrap: wrap !important;
  }

@prashant.c i am using Drupal version 11.x there might be small issue with my installation i have installed Drupal freshly let me try it once again.

@all @ prashant.c

I've identified the issue, but the fix currently applies only to the specific theme where the changes were made. To implement this fix globally across all themes, we’ll need to create a custom file or explore an alternative solution. Let me know if you have any other suggestions.

i have fixed the issue by adding width:100% but this fix is applied separately to each theme please review. screenshot attached

Issue still replicating to me

Paragraphs is having CKEditor responsive issue which is related to a existing ticket.

After adding the wrapper icon in Editor settings as attached the editor is behaving responsive. Attached the responsive editor also.

@sriharsha.uppuluri
try this :-

.text-full.form-element {
  width: 100%;
}

.text-full.form-element {
  width: 100%;
}

These styles will not work if the CKEditor5 is rendered, I have attached the screenshots in previoud comment