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.