@Subhang23 Please check the review comments above.

In addition, please check the view of changed files in this PR on GitHub here: https://github.com/joomla/joomla-cms/pull/27975/files. It shows that for the scss files which you have changed, but also for other scss files which you havent changed, the file system permissions (in Linux: "mode") has changed so they are marked as executable (Linux: mode 755). You can see that right beside the file name: 100644 → 100755, which means "mode has changed from 644 to 755". Could you change that back (e.g. in Linux: chmod 644) for all the files? For the files in which you haven't changed any content it should be sufficient to revert changes (that should also change back the mode) in your Git client.

@Subhang23 File permissions look ok now. But I'm still missing some description or screenshot in the description of your PR, like @infograf768 has mentioned in his review comment above. Testers and maintainers need to know how it shall look on mobile phone when the changes of this PR have been applied.

Finally I think the changes here might be not correct, but I am not 100 % sure because I am not a css expert.

As far as I know we have the "mobile first" strategy, i.e. css without media queries applies for mobile phones, and css for desktop is made with media queries. But here in this PR it seems to be vice versa.

And I did not find anywhere else the @media (max-width: 576px) being used, except in your PR. At other places I only find @media (min-width: var(--breakpoint-md)) (which also speaks for our existing (s)css code using the "mobile first" strategy). @C-Lodder Could you have a look on it and let me know if I am right (i.e. this PR is wrong) or if I'm right (i.e. this PR is right)?

@richard67 I had realized there were some other issues also so I hadn't yet provided any screenshots

Please see what happens when images subfolders are used.

I don't know how Atum was developed. If it was mobile first then these changes are wrong. If it was desktop first then....ya know what? They'll suffice

@infograf768 do you know if atum’s (s)css is mobile first?

@infograf768 do you know if atum’s (s)css is mobile first?

Absolutely no idea. And no idea either who to ask...

Please see what happens when images subfolders are used.

@infograf768 I would need some more time because there is too much content to be shown on a small screen and I would most probably have to make changes in the .vue files

because there is too much content to be shown on a small screen

Indeed, my test:

How do I view changes made to the .vue files?

$ cd administrator/components/com_media
$ npm run build

@infograf768 @C-Lodder As far as I could see meanwhile in old issue and PR, the backend template Atum shall still be "desktop first". Only for the frontend template Cassiopeia the (s)css was changed to "mobile first". So regarding that this PR would be ok. I am only not sure if it shall used hard-coded px values in media queries or if there are ot variables which could be used. But if you say it's ok then it's ok for me, too.

@richard67 I personally wouldn't hardcode PX valued media queries, but seeing as the SCSS has been bastardised anyway, I can't say it would make it any worse.

@C-Lodder have I made any bad changes to the scss files

@infograf768 @C-Lodder @richard67 Is this good?

I just wanted to know - is it necessary to have a zoom in and zoom out option for mobile viewers?

@Subhang23 - I think personally that it would be good if the files in the media manager have a min width of like 100px or so. Zooming in might be nice but more important to get your already done work into Joomla :-) Maybe you can do the Zoom in a separate PR. Is it ready to be tested?

Current nightly on iPhone

closing this as dead and going to try to restart it here #31140