Optimization round 2 for Layout Builder modal and block editing combined styling

Problem/Motivation

Follow up issue after #3540623: Fix Various CSS and UI Issues Affecting Usability and Consistency while editing the layout with Layout Builder
Drupal core 10.4/10.5 was released, Claro in Drupal core had number of changes.
The Gin admin theme 3.1/4.1 was released with number of changes.

• Sascha committed #3279620: RTL (right-to-left): change to logical CSS
• Following with his logic of CSS Logical Properties in all integrations with Gin and Claro - and the front-end theme.
• The movement for changes with Logical Properties will extend to Drupal Core and Contrib modules and themes.
• Most of [dir="rtl"] or [dir="ltr"] selectors will be removed from CSS, SASS, PostCSS in code.

Several CSS and layout inconsistencies were observed across the Layout Builder interface that impact user experience and visual consistency. These issues affect the positioning of loading indicators, alignment of fields and menus, visibility of icons and controls, and overall UI polish. Addressing these will improve the usability and professional appearance of the Layout Builder.

• The ring when adding a block is in a wrong spot (Maybe make it the same thing once a user click on the add block and you see a ring in the middle of the screen)
• Fields inside the blocks sometimes are not the same length (Accordion Block for example)
• The collapse menu items are not on the same length
• The drag and drop icon is not visible
• The show weights fields are not visible enough or not enough space to show them
• The collapse all sub menu “edit all” is not on the same length
• Once a block is saved the word “Processing” is not in a good spot
• Style tab for the blocks, If a color is selected then the user clicks on the de-select button the whole grid will stay in gray
• Fix the (X) button as well
• The * icon is not in the correct place
• The tabs are not aligned correctly with the field below it

Steps to reproduce

• When using the Layout Builder
• When adding sections
• When adding blocks with modal
• When editing/editing Accordions
• When adding/editing Impressed card

Proposed resolution

• Update the Gin theme build for layout builder modal
• Update the Claro theme build for layout builder modal

• Adjust CSS positioning for the add block ring to be consistent with the central display.
• Standardize field width inside all blocks (including Accordion Block).
• Align collapse menu items to a unified horizontal baseline.
• Make the drag-and-drop icon visible with proper contrast.
• Ensure show weights fields have enough space and visibility.
• Align Collapse all submenu edit all option with other menu items.
• Move Processing text to a clear and consistent position after save.
• Reset grid background to default when deselecting a style color.
• Correct (X) close button alignment.
• Reposition the * required-field indicator to follow form label conventions.
• Align tabs with the corresponding field content below.

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ✅ Accessibility and Readability
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes and Update Helper on new feature change/addition
• ✅ Release varbase-10.1.0-beta1, varbase_layout_builder-10.2.0-beta3, varbase-10.0.8, varbase_layout_builder-10.1.15

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

After the fix:

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• #3547948 perf(ui): Optimization round 2 for Layout Builder modal and block editing combined styling By: n.ghunaim