#1266 :: Clean up Remove and Move panel UI in Layout Builder (/layout)

[laura-johnson]

YALB-1266: Clean up Remove and Move panel UI in Layout Builder (/layout)

Description of work

After the Drupal 10.6 / Gin 4.x / Gin LB 2.0 upgrade, the Layout Builder Remove and Move off-canvas panels (/layout) had several visual regressions:

• Cancel button unreadable in dark mode — rendered dark-on-dark.
• Cancel button too small — didn't match the primary action's size.
• Close "X" overlapped the title — no clearance on wrapped headings.
• Move reorder table unstyled — lost its header, row borders, and handle alignment.
• Drag handles alternated colors row-to-row in dark mode.
• "Show row weights" toggle rendered as a bare link.

Fixes
All fixes live in the atomic theme's css/admin-theme.css, which is where the admin/off-canvas styling already lives.

1. Cancel button: atomic's existing .dialog-cancel rule only set a text color that's wrong for the dark dialog. Replaced it with a proper secondary button (outline, theme-aware color, matched sizing) in both modes.
2. Close "X": reserved inline-end space on the dialog title so the close button never overlaps the heading.
3. Move table: restored the header background, row borders, drag-handle/label alignment, and a non-indenting accent for the current row.
4. Drag handle alternation (root cause): an existing WCAG #1086 contrast rule forces drag handles dark on tr:nth-child(even), assuming even rows have light backgrounds. The Move table's rows are all dark (not striped), so that override was wrong there. Excluded .layout-builder-components-table__row from those even-row rules so every handle renders identically.
5. "Show row weights": styled as a small secondary button.

Functional testing steps:

• Go to the layout builder edit on any page. Verify that the Move and Remove dialogs are styled correctly.

Demo on this multidev

eg https://pr-1289-yalesites-platform.pantheonsite.io/node/114/layout

Platform PR: yalesites-org/yalesites-project#1289

[miketullo95]

@laura-johnson two really small things:

• can we move this side panel up? this isnt the same side panel being used when you configure, move, or delete a block. This is the side panel that opens when you click the side panel icon when you go into /layout

• can we remove this leftover ui element here (when you try to remove a block) that seems to not do anything? unless removing it has a domino effect on something else

[github-actions]

🎉 This PR is included in version 1.75.1 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀