Problem/Motivation

On the node edit form, the sidebar accordions (Translation, URL alias) show the details arrow above the vertical center of the summary.

Steps to reproduce:

  1. Use the Default Admin theme as the administration theme.
  2. Go to /admin/appearance/settings/default_admin and set "Layout density" to "Narrow".
  3. Edit a node that has the path and content translation fields.
  4. Look at the arrows next to "URL alias" and "Translation" in the sidebar.

The summary is 88px high. The arrow center is at 20px from the top. The title line center is at 32px.

Cause: css/components/edit-form.css sets inset-block-start: var(--admin-space-density-xl, var(--admin-space-xl)) on .details__summary::before inside .entity-meta > .accordion__item. The base rule in details.css uses inset-block-start: 50% with margin-block-start: calc(var(--admin-space-m) / -2). The fixed offset replaces the 50% value, so the arrow sits 12px above the title line.

Proposed resolution

Remove the &::before rule from edit-form.pcss.css and edit-form.css. The arrow then uses the base position from details.css.

Remaining tasks

  • Review.

Notes

Generated with the help of an LLM.

CommentFileSizeAuthor
#8 ZOOM_Sharing_Frame_Window.png86.99 KBmherchel
#5 after.png12.5 KBmaks oleksyuk
#5 before.png12.56 KBmaks oleksyuk

Issue fork drupal-3630286

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

maks oleksyuk created an issue. See original summary.

maks oleksyuk opened merge request !17414

maks oleksyuk’s picture

maks oleksyuk commented
Issue summary: View changes
Status: Active » Needs review
smustgrave’s picture

smustgrave commented
Assigned: maks oleksyuk » Unassigned
Status: Needs review » Needs work
Issue tags: +Needs screenshots

Unassigning per https://www.drupal.org/docs/develop/issues/fields-and-other-parts-of-an-...

maks oleksyuk’s picture

maks oleksyuk commented
Issue tags: -Needs screenshots
StatusFileSize
new before.png12.56 KB
new after.png12.5 KB
maks oleksyuk’s picture

maks oleksyuk commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented

Since the summary appears to be copy/paste from AI going to leave for others to review.

https://www.drupal.org/docs/develop/issues/issue-procedures-and-etiquett...

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new ZOOM_Sharing_Frame_Window.png86.99 KB

I've seen this before, but I can't reproduce now. Is this still an issue?

maks oleksyuk’s picture

maks oleksyuk commented
Issue summary: View changes

The offset depends on the layout density. I can reproduce it with "Narrow" and "Compact". With "Default" the arrow is in line with the title, so the issue is not visible there.
I've updated the steps to reproduce.

For the fix, I used Claro as a reference. Claro centers the arrow in the summary, while Default Admin puts it at a fixed offset from the top, even with "Default" density (see the earlier screenshot).