Layout Builder: Various CSS and UI Issues Affecting Usability and Consistency

Created on 10 August 2025, 6 days ago

Problem/Motivation

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.

Steps to reproduce

Access the Layout Builder and interact with various UI elements such as adding blocks, using collapse menus, and editing styles. Observe multiple CSS issues, including misaligned loading indicators, inconsistent field lengths, poorly aligned menu items and icons, visibility problems with controls like drag-and-drop and weight fields, and layout inconsistencies in different languages. Specific issues also include color selection behavior and positioning of required field indicators and tabs.

Proposed resolution

Improve and standardize the CSS styling across the Layout Builder interface to enhance consistency and usability. These fixes will be applied primarily in the vlb-enhancements.base.css stylesheet.

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 update type

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

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A
🐛 Bug report
Status

Active

Version

10.0

Component

Code

Created by

🇯🇴Jordan n.ghunaim Amman - Jordan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024