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
Before the fix

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

Varbase update type

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

User interface changes

After the fix:
After the fix

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

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

  • rajab natshah committed 81a9b2b6 on 10.2.x
    fix: #3561009 Field Label Color and Description Visibility for Deep (4th...

  • rajab natshah committed 3d0d5a00 on 10.1.x
    fix: #3561009 Field Label Color and Description Visibility for Deep (4th...
rajab natshah’s picture

rajab natshah’s picture

Assigned: mohammed j. razem » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

rajab natshah’s picture

StatusFileSize
new91.41 KB

Fix Layout Builder Style Breaks on Edit (regression from #3561009)

Add section

rajab natshah’s picture

Issue summary: View changes
Issue tags: +varbase_layout_builder-10.2.0-rc2
rajab natshah’s picture

Issue summary: View changes
Issue tags: +varbase_layout_builder-10.1.18
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

rajab natshah’s picture

Issue summary: View changes

✅ Release varbase-10.1.0

rajab natshah’s picture

Issue summary: View changes

✅ Released varbase-10.0.9