Media Library item styles assume contextual module is present

Created on 28 January 2025, 2 months ago

Problem/Motivation

For media item labels to be positioned correctly, the enclosing <article> needs to be position: relative;. If the page includes the contextual module libraries then the <article> will have the .contextual-region class and be styled by this bit in contextual.module.css

.contextual-region {
    position: relative;
}

There are legit scenarios such as this one with Experience Builder 📌 Media Library dialog styling Active where the media library is used without contextual present -- even on sites with that module enabled.

It winds up looking like this, with the labels under the images out of place (not hugely so, but still not a great look)

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.1 🔥

Component

Claro theme

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

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

Merge Requests

Comments & Activities

  • Issue created by @bnjmnm
  • 🇮🇳India niranjan_panem Gurugram

    In Drupal 11 the labels in media library moved to center below the file, below is the screen shot of it.

  • 🇺🇸United States bnjmnm Ann Arbor, MI

    Re #3 @niranjan_panem in order to reproduce the issue as reported, the contextual module must be disabled.

    Since you did not mention disabling the contextual module in your comment, anyone looking at this issue should assume the issue as reported is still valid unless #3 is clarified further.

  • 🇺🇸United States phenaproxima Massachusetts

    This is of interest to Experience Builder and, therefore, to Drupal CMS. I'm hoping it can be fixed in time for Drupal CMS 2.0, which will have XB as its native page builder.

  • First commit to issue fork.
  • Pipeline finished with Failed
    21 days ago
    Total: 261s
    #449213
  • 🇧🇷Brazil julio_retkwa Balneário Camboriú

    I've added an approach that solves the issue, but my concern is on how to test it widely to make sure it works on all instance
    If anyone could help me with that would be great :)

  • 🇧🇷Brazil julio_retkwa Balneário Camboriú
  • Pipeline finished with Failed
    20 days ago
    Total: 700s
    #449337
  • 🇺🇸United States bnjmnm Ann Arbor, MI

    I've added an approach that solves the issue, but my concern is on how to test it widely to make sure it works on all instance
    If anyone could help me with that would be great :)

    Testing it widely could be difficult, but there's a way to approach this where this wouldn't be necessary.

    Instead of changing padding and max-width, the least disruptive way to do this would be to preserve the styling that is known to already work. If you make the enclosing <article> tag have position: relative;, but use a selector that isn't dependent on the .contextual-region class being present, this fixes it in a way that only requires a few moments of testing.

  • 🇧🇷Brazil julio_retkwa Balneário Camboriú

    Hi @bnjmnm thanks for the insights I've updated my MR based on your suggestion

    off topic here:
    My previous commits where made based on the following issue:

    There is any issue related to that already opened? it basically happens on any media library item that has a text that goes less than 80% of wrapper size

  • Pipeline finished with Success
    17 days ago
    Total: 639s
    #451782
  • 🇺🇸United States smustgrave

    Hello, can the IS be updated please.

    Proposed solution
    Steps to reproduce
    Before/after screenshots in the User Interface section

    API and Data model are unchanged so probably can just put NA.

    Thanks!

  • 🇧🇷Brazil julio_retkwa Balneário Camboriú
  • 🇧🇷Brazil julio_retkwa Balneário Camboriú

    Hi @smustgrave I've just updated, but I'm not sure if following are right:
    * Release notes snippet
    * Introduced terminology
    * Remaining tasks

    May you can assit me with that?

    Thank you!

  • 🇧🇷Brazil julio_retkwa Balneário Camboriú
  • 🇺🇸United States bnjmnm Ann Arbor, MI

    @julio_retkwa appreciate the attempt but the changes to the summary are not at all what was reported, the steps to reproduce and proposed solution seem like they are from an entirely different issue that happens to be media library related. Among other things you added "Added a js behaviour to scroll up on field media modal open." as the Proposed Solution despite not touching any JS in your MR or the issue having anything to do with scrolling.

    I updated the IS to address this.

  • 🇧🇷Brazil julio_retkwa Balneário Camboriú

    #16 Hi @bnjmnm Thanks for jumping into that, I've changed summary wrongly.
    Here is the result of my MR:

  • 🇮🇳India sdhruvi5142

    Hi
    I've applied MR!11488 on Drupal Version 11.x and the changes are working as expected.

    Testing Steps:
    1. Installed Claro as the admin theme
    2. Added a media library field to any content type.
    3. Disabled the Contextual module
    5. Open the media library dialog in the add/edit form for the content type
    6. Observe the changes there

    Testing result:
    After applying the MR! the Media libarray item styles looks proper nothing seems to be broken. Attaching SS for reference. Moving this to RTBC+1

    Status : PASS

Production build 0.71.5 2024