Media Library styling broken

I 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.

Okay, 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).

added screenshots of media screens which need fixes

Here's screenshots of the patch application:

Media - modal - mobile

- Grid on mobile requires appropriate spacing:

Media - modal

+ Edit/delete buttons are visible and keyboard accessible
+ 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
- spacing/alignment not applied

Media - Widget

+ Delete button is visible
- Visible outline is missing when buttons is in focus

added styling for media type tabs

screenshot:

This 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?

@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.

@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.

Merged in 4.0.x as there were conflicts in the generated css/*.css files. I recompiled them.

I 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).

Looks good. thank you 🍻

Merged and released. 🎂