to make it easier for testers to evaluate the changes please include some before and after screenshots

Hi @mehkanarshad, I can't reproduce the AFTER condition, I am getting the same results as BEFORE at 1181px wide ;(

I have tested this item 🔴 unsuccessfully on 9a3f1ec

I have tested this item 🔴 unsuccessfully on 9a3f1ec

Hi @exlemor @brianteeman ,

I’ve just pushed an updated commit with further SCSS adjustments. Hopefully, this resolves the spacing and alignment issue at all screen widths.

Please let me know if it works as expected.

Are you actually testing what you submit or are you just guessing?

I didn’t test it properly the first time. The second time, I adjusted it intentionally because I thought the space above was too small for the media files. I’ve now changed it the other way around.

@mehkanarshad Please fix the code style errors reported here: https://github.com/joomla/joomla-cms/actions/runs/23184461499/job/67369094630?pr=47387 . Thanks in advance.

I have tested this item ✅ successfully on a40affe

i'm not a css expert but this appears to be ok

I have tested this item ✅ successfully on a40affe

RTC

Note: it is partial fix of #45012
The issue with large folders list in "navigation" is still actual.

It does not fixes Table view,

And it pretty strange/tight on Tablet now:

@Fedik Shall we remove RTC and request changes? Or shall we only remove the reference to the issue because this PR only solved it partly so that the issue will not be closed automatically by GitHub when that PR will be merged?

I would remove RTC. And ask for changes.

We still can fix Media query here, but it is need to test across all screen sizes (laptop, tablet, mobile) not only mentioned in the issue. To be sure nothing is broken after the changes.

Also the Table view need to be addressed.

Back to pending due to previous comments.

@mehkanarshad Could you check @Fedik 's previous three comments and let us know if you can update your PR fix the issue completely?

@mehkanarshad you can skip the "The folders navigation" it is not something that can be easily fixed as part of bug fix. However you still can adjust the media query to make it looks good on all major screen sizes.

Hey Fedik,

I reviewed your feedback and adjusted the layout so the flex wrapping kicks in at a point where the folders don’t feel cramped and the sidebar doesn’t expand too much. I also updated the table to allow horizontal scrolling.

This should improve responsiveness across the main screen sizes—let me know if anything still feels off.

@Fedik Could you please review the changes and approve them? We could then remove the “Updates requested” label and the PR could be tested again and across the various screen sizes.

It looks good now

@brianteeman and @krishnagandhicode may I ask you for testing this PR again?

@mehkanarshad - It looks good for screen smaller on laptop under 1200px now and when I tested iPad was fine but when I tested iPhone/mobile phones sizes... it could be me but the bottom section doesn't work, the file folders/file icons are too small, squashed - I'd expect them to be vertically max 2 columns....

It seems to be caused by media.manager.min.css having the entry:

.media-browser-items.media-browser-items-md {grid-template-columns: repeat(auto-fill,minmax(18%,1fr));}

while

.media-browser-items.media-browser-items-md {grid-template-columns: repeat(auto-fill,minmax(35%,1fr));}

looks a lot easier to read...

It looks like this now:

instead of being able to look like this (easier to read):

@exlemor
I’ve updated the grid to use 2 columns on smaller screens only (≤576px), which keeps the items readable without affecting tablet layouts.