Problem/Motivation
When opening nested AJAX UI forms that reach the 4th or 5th level inside the Media Library modal
(e.g., Add Media → Entity Browser → Media Edit Form), the following UI issues occur:
- Field labels lose their correct color
- Labels appear too light or inherit wrong opacity, making them unreadable. - Field descriptions become difficult to read
- Description text blends with the modal background. - Required field asterisks are barely visible
- Especially inside deep AJAX-loaded forms. - Media Library form wrapper styling is inconsistent
- Borders, padding, and background layers overlap incorrectly.
These issues only appear in deep AJAX form nesting, not on first-level forms.
Screenshots confirm that the problem is triggered when the form is loaded multiple times inside layered modals.
Steps to reproduce
1. Open a page with Layout Builder or any modal-based editor.
2. Add a block requiring an image.
3. Click Add or Select Media → triggers AJAX modal.
4. Upload an image → triggers another inner AJAX form.
5. Observe the 4th/5th level media edit form.
6. Notice:
- Label color incorrect
- Description text unclear
- Required asterisk nearly invisible
- Form wrapper border mismatching

Actual Result
- Label text is low-contrast and difficult to read.
- Descriptions barely visible.
- Required field markers lose color styling.
- Modal form does not inherit Varbase form styling in deep nested AJAX calls.
Proposed resolution
- Limit for drupal-off-canvas and layout-builder-modal
- Not to apply to all UI Dialog
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, varbase_layout_builder-10.2.0-rc1, varbase_layout_builder-10.2.0-rc2, varbase-10.0.9, varbase_layout_builder-10.1.17, varbase_layout_builder-10.1.18
Varbase update type
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
API changes
- N/A
Data model changes
- N/A
Release notes snippet
- fix: #3561009 Field Label Color and Description Visibility for Deep (4th/5th Level) AJAX Media Library Forms
| Comment | File | Size | Author |
|---|---|---|---|
| #12 | adding-section.png | 91.41 KB | rajab natshah |
| #2 | Edit-layout-for-test-v10x01b1-12-02-2025_01_25_PM--after-the-fix.png | 206.36 KB | rajab natshah |
| #2 | Edit-layout-for-test-v10x01b1-12-02-2025_01_17_PM--before-the-fix.png | 171.49 KB | rajab natshah |

Comments
Comment #2
rajab natshahComment #5
rajab natshahComment #6
rajab natshahComment #8
rajab natshahComment #9
rajab natshah✅ Released varbase_layout_builder-10.1.17
Comment #10
rajab natshah✅ Released varbase_layout_builder-10.2.0-rc1
Comment #12
rajab natshahFix Layout Builder Style Breaks on Edit (regression from #3561009)
Comment #13
rajab natshahComment #14
rajab natshahComment #15
rajab natshahComment #16
rajab natshah✅ Released varbase_layout_builder-10.2.0-rc2
✅ Released varbase_layout_builder-10.1.18
Comment #17
rajab natshah✅ Release varbase-10.1.0
Comment #18
rajab natshah✅ Released varbase-10.0.9