Problem/Motivation

When adding a new library item, choosing a Paragraph from a Dropbutton widget causes the dropdown to extend beyond the left edge of the screen.

A dropbutton widget where the items revealed are cut off outside the viewport.

* Note: in our system, we have written a custom module that renames "Paragraph" to "Reusable".

Steps to reproduce

On a site using Paragraph Library items, where the field widget for selecting a Paragraph uses a dropbutton select, try to select a Paragraph.

Proposed resolution

There is a specificity hack in the Gin theme that targets Node Forms, but the Library form doesn't get it because it doesn't match the classes used.

.node-form :where(*) .dropbutton .dropbutton__items,
.node-form :is(#extra-specificity-hack, [data-drupal-admin-styles]) .dropbutton .dropbutton__items {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

Should be easy enough to copy this hack, prefixed with `.paragraphs-library-item-form` instead of `.node-form`.

Comments

nessthehero created an issue. See original summary.

hoxton’s picture

StatusFileSize
new225.52 KB
hoxton’s picture

Unable to replicated and is working normally. My be you have some css class override causing issue.

hoxton’s picture

Status: Active » Needs review