feat(ui): add responsive styling for mobile compatibility

[liamsegura]

Fixes #7241

Summary

Long time user of decap-cms, always wanted a way to use while on my phone, this PR fixes that.

Added media queries for responsive styling
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> is required in the html for it to work, i have only updated the dev-test html

If this is merged in I can go through the other repos and update that accordingly

I can improve this visually as there are areas id like to modify but that can be altered at a later date

Screen.Recording.2024-10-03.at.2.01.40.PM.mp4

Test plan

Checklist

Please add a x inside each checkbox:

• I have read the contribution guidelines.

A picture of a cute animal (not mandatory but encouraged)

[martinjagodic]

@liamsegura, thanks for your effort. While reviewing, I had some comments/ideas, and I figured it would be faster if I just implemented them. Then I got carried away and I did a lot of additional changes. I ran out of time to fix snapshots, so tests are failing.

If you have any comments, let me know. I used clamp a lot and Increased some font sizes because I think 8px is too little to read.

[liamsegura]

Hey @martinjagodic

Thank you. When I get some time ill take a look, as long as its working on smaller screens, then visually i'm happy for whatever you'd prefer.

The overall styling I implemented could have done with changes so very open to it, do we know how we will go about adding: <meta name="viewport" content="width=device-width, initial-scale=1.0" /> to production? is it just a case of going through repos within decaporg and adding this line? or is there something else I'm missing.

[hip3r]

snapshots are fixed, tests are successful.
There is one issue, mobile scrolling doesn't work when preview is enabled

Decap.CMS.Development.Test.-.Brave.2025-04-03.22-42-08.mp4

[hip3r]

another issue was with Preview container visibility. If split screen is resized, Editor container's size is then set to fixed value (preview container is positioned after editor container). Changing mobile/desktop after that could result in Editor container size be set to big. Preview container wasn't visible in this case. Fixed by limiting custom size of Editor container, and by reloading component when changing mobile/desktop view.

It seemed good to me, to automatically add <meta name="viewport" content="width=device-width, initial-scale=1.0" /> to cms (on load), if it doesn't exists. This way most of users will be affected without the need to manually edit html

@martinjagodic PR is ready for review