Suggested metadata (for maintainers — cannot be set at creation): Category: Bug report · Version: 2.0.0-beta15 (2.x) · Priority: Normal ## Problem/Motivation Since [#3445516](https://www.drupal.org/project/frontend_editing/issues/3445516), when a reference field with the "Add items" third-party setting enabled is empty, a placeholder link "No items found for field "@label", click to add one." is rendered in place of the field. In `ViewAlter::viewAlter()`, the empty-field wrapper only receives the `frontend-editing-actions` class: ```php $build[$field_name]['#theme_wrappers']['container']['#attributes']['class'][] = 'frontend-editing-actions'; ``` Meanwhile, `css/frontend_editing.css` collapses that container: ```css .frontend-editing-actions { height: 0; } ``` This rule exists for the hover action bars, whose buttons must overlay the entity content without taking up space in the flow. The stylesheet already provides a reset for wrappers that do contain in-flow content: ```css .frontend-editing-actions.frontend-editing-field-wrapper { height: auto; } ``` …but the empty-field placeholder wrapper never gets the `frontend-editing-field-wrapper` class: it is only added in the `ajax_content_update` branch, which requires a non-empty field (`#theme == 'field'`). An empty field skips that branch entirely. As a result, the placeholder link is a normal in-flow element (~25px tall) inside a 0-height container: it overflows and visually overlaps the next field in the display (see screenshots below). Git history shows this reset was part of the original design and has been dead code from day one: - `height: 0` on `.frontend-editing-actions` was introduced by commit aea8cc8c ([#3423781](https://www.drupal.org/project/frontend_editing/issues/3423781)), for the hover action bars. - The `.frontend-editing-actions.frontend-editing-field-wrapper { height: auto; }` reset was added by commit 80b5edda — the very commit of [#3445516](https://www.drupal.org/project/frontend_editing/issues/3445516) that introduced the placeholder. But in that same commit, the PHP side only ever adds `frontend-editing-actions` to the empty-field wrapper, and the two branches that emit each class are mutually exclusive, so this compound selector has never matched any element. In other words: the original author anticipated exactly this collapse and wrote the CSS reset for it, but the matching class was never added on the PHP side. Reproduced on 2.0.0-beta15, which already includes the fix for [#3541489](https://www.drupal.org/project/frontend_editing/issues/3541489) — that issue was about the placeholder not being hidden when the toggle is **off**; this one affects rendering while the toggle is **on**. The two are distinct. ## Steps to reproduce 1. Create a content type with an entity reference revisions (paragraphs) field displayed **above** a body field. 2. Enable the paragraph entity type/bundles in Frontend Editing settings, and enable the "Add items" third-party setting on the paragraphs field formatter (Manage display). 3. Create a node with a filled body but **no paragraph items**. 4. Visit the node as a user with the "access frontend editing" permission, with the frontend editing toggle switched on. 5. The "No items found for field "…", click to add one." link overlaps the body field. **Before (bug):** {width=60%} **After (with the proposed fix, two stacked empty fields):** {width=50%} ## Proposed resolution Add the `frontend-editing-field-wrapper` class to the empty-field wrapper in `ViewAlter::viewAlter()`, so the existing `height: auto` reset applies: ```php $build[$field_name]['#theme_wrappers']['container']['#attributes']['class'][] = 'frontend-editing-actions'; $build[$field_name]['#theme_wrappers']['container']['#attributes']['class'][] = 'frontend-editing-field-wrapper'; ``` The class is only referenced by CSS (and by the same file's `ajax_content_update` branch); no JS targets it. Since the compound selector currently matches nothing, activating it can only affect the element that now carries both classes — the blast radius is provably limited to the empty-field placeholder. This simply completes the pairing the original commit intended. MR to follow. An alternative would be a dedicated modifier class (e.g. `frontend-editing-actions--empty-field`) with its own `height: auto` rule, if maintainers prefer not to reuse `frontend-editing-field-wrapper` outside the ajax-content-update context. Workaround until then (CSS override): ```css .frontend-editing-actions:has(> .frontend-editing__action--add-empty) { height: auto; } ``` ## Remaining tasks - Review the MR.