🇮🇳India @amitrawat056

I believe this issue is caused by ul.vertical-tabs__menu being given align-self: flex-start. To resolve it, unset this property using align-self: unset and provide height: 100% to both li.vertical-tabs__menu-item and the a tag. This should fix the problem.

Hi
I encountered a similar issue. If you don't need the dropdown, you can add a wrapping button, as shown in the pic.

After adding

However, if you do need the dropdown, you can resolve the overflow issue by adding the following CSS code:

.ck.ck-toolbar-dropdown>.ck-dropdown__panel {
width: 100% !important;
}
.ck.ck-dropdown {
position: unset !important;
}
.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw {
top: 38px !important;
}

amitrawat056 → created an issue.

Hi, I am experiencing a similar issue in both the Carlo and Gin themes. You can refer to this issue here: https://www.drupal.org/project/drupal/issues/3462547 🐛 Paragraph reference overlaps with node's vertical tabs when expanded Active .

After some testing, it seems that the issue is caused by the input tag. Setting the width to 100% makes the input responsive and resolves the overflow issue, as shown in the video. When the width is set to auto, the overflow problem persists. The same behavior is observed in both the Carlo and Gin themes.

I encountered a similar issue, and it was caused by the CKEditor5 template. Downgrading to the following versions resolved the problem for me:

ckeditor5_template: 1.0.5
ckeditor_templates_ui: 2.0.0-alpha3

After applying these versions, everything worked as expected.

I encountered the same issue. #38 works for me, Drupal 10.2.6.

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.

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;
}

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

This CSS code still work for me, i m on Drupal 10.3.3