The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.Problem/Motivation
There are numerous problems with the CSS introduced in #3249388: Styling update for media library.
A lot of the styles do not apply because the classes media-library-views-form and media-library-item--grid is missing from the media browser view. This results in a broken UI.
Media widgets
-
The class
media-library-selectionis missing. - Missing delete button: None of the styles apply except the button styles which causes the buttons to disappear into the upper right page corner effectively making it impossible to remove or edit media items.
Media library - grid and table
- The class
media-library-views-formis missing. All of the styles under .view-media-library do not apply at all to the media library either at /admin/content/media-grid, layout builder, or ckeditor embed media button. - The media library item name (label) is a plain div with no classes to allow styling. This is inherited from the stable 9 template.
- Media card spacing.
- Media card is missing edit/delete controls.
- Media thumbnail spacing/alignment styling.
- Filter components alignment styling.
- Bulk operations components alignment styling.
Media edit form
- Edit form requires layout similar to Claro's
Media Library Modal
- The media types tabs require styling
- Add file control requires styling as a card
- Media card requires styling with appropriate spacing, alignment
- Media cards require grid layout
Remaining tasks
- Modal size
- Media type tabs
| Comment | File | Size | Author |
|---|---|---|---|
| #18 | claro-vertical.jpg | 27.63 KB | stefan.korn |
| #16 | media-library-media-type.jpg | 15.44 KB | stefan.korn |
| #15 | b5-patched-modal-mobile.png | 385.09 KB | jannakha |
| #15 | b5-patched-modal-grid.png | 396.15 KB | jannakha |
| #15 | b5-patched-media-table.png | 355.46 KB | jannakha |
Issue fork bootstrap5-3475403
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
rhovlandComment #3
rhovlandComment #4
rhovlandComment #6
rhovlandComment #7
rhovlandComment #8
stefan.kornI can confirm the issue and the MR is greatly helping to fix this.
I even think that the modal size and tab styling is okay now.
Comment #9
stefan.kornOkay, I think there have been some unrelated changes to CSS in the MR introduced by changing/updating the node packages.
I think, this should not be part of this issue, but in case it is needed be solved in a separate issue.
There were some really strange changes to the CSS like
--bs-primary-text-emphasis: rgb(5.2, 44, 101.2);This results from latest changes in SASS, see https://sass-lang.com/documentation/breaking-changes/color-functions/ and using 1.79.x for sass would require changes in handling colors. But this is surely out of scope for this issue. More a general build issue for bootstrap5 theme.
So imho the build process should be done with sass version 1.54.0 as current package-lock.json states.
I therefore did the build process with sass 1.54.0 and reverted changes that were introduced by building with newer sass version (1.79.1).
Comment #10
jannakha commentedadded screenshots of media screens which need fixes
Comment #11
jannakha commentedComment #12
jannakha commentedComment #13
jannakha commentedComment #14
jannakha commentedComment #15
jannakha commentedHere's screenshots of the patch application:
Media - modal - mobile
- grid on mobile requires appropriate spacing:
Media - modal
+ card style is applied
- media card layout requires further fixes (alignment/spacing)
Media - table
No changes on the table layout:
Media - grid
+ card style applied
+ edit/delete buttons are visible and keyboard accessible
- spacing/alignment not applied
Media - Widget
+ delete button is visible
- visible outline is missing when buttons is in focus
Comment #16
stefan.kornadded styling for media type tabs
screenshot:
Comment #17
fenstratThis is looking good and fixes many issues with the media library styling, though I've not had a chance to test it extensively.
One note on the last changes from @stefan.korn with media type tab styling - I think other themes show the tabs as horizontal tabs? I'm not sure displaying them as buttons is a great choice?
Comment #18
stefan.korn@fenstrat: Thanks for your input.
Regarding the media type styling I was unsure. Claro uses vertical tabs:
Bootstrap provides this for vertical nav:
https://getbootstrap.com/docs/5.3/components/navs-tabs/#vertical
But imho this is looking a bit to "sleek", especially there is no visual hint regarding the active state. So I decided to use vertical pills, like shown at the end of this paragraph in the Bootstrap documentation: https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behavior
It seems Bootstrap is currently not providing something exactly similar with its defaults to what Claro is using.
Comment #19
fenstrat@stefan.korn right, looks like we're pretty limited in terms of OOTB solutions from Bootstrap.
Also, sorry for the confusion when I mentioned "horizontal tabs" in #17, I should have said vertical tabs.
So yeah, we could introduce our own vertical tabs, but given this might be the first time a use for them as come up, then it might not be worth the overhead. So I'd probably agree with your solution of going with the nav-pills as the least worst option.
Comment #20
fenstratMerged in 4.0.x as there were conflicts in the generated css/*.css files. I recompiled them.
Comment #21
fenstratI think this is at least ready for review. I'm using this with media library and it is a great improvement (actually makes it usable).
Comment #22
vladimirausLooks good. thank you 🍻
Comment #24
vladimirausMerged and released. 🎂