[feat]: Make components responsive and Mobile friendly

[gprieto]

A clear and concise description of what the feature is

The strapi admin UI built on top of strapi/design system must be responsive and Mobile friendly. This is especially painful for the content-manager.

Why should this feature be included?

Many users (including myself) need this to keep using Strapi, which is otherwise fabulous. See here: Responsive Administration Panel.

Also, the WebStandards police :) should say something about having this in the strapi admin-panel HTML head tag: <meta name="mobile-web-app-capable" content="yes"> when it is absolutely not the case.

Please provide an example for how this would work

A good start would be enhancing the layout-type components used by the content-manager:

1. The MainNav - strangely enough the collapsible feature kinda works well in mobile.
2. The SubNav- could also be made collapsible in a similar fashion, but down to 0 width - this could be activated only for small screens.
3. The rest of the layout components inside content-manager should primarily (in small screens):
   • change all grid layouts to 1 column
   • decrease all the padding and margins

Quick example of an acceptable/functional mobile-friendly content-manager:

[joshuaellis]

👋🏼 hey @gprieto thanks for the feature request, as you can see from the Canny board this is something on our radar and would include work here in the Design system to implement – stay tuned!

[gprieto]

Thanks @joshuaellis, do you have any timeframe on when is this going to be addressed?

Also, what is the best current workaround? Our content managers work primarily on mobile... Such a pain, let me tell you

[joshuaellis]

Thanks @joshuaellis, do you have any timeframe on when is this going to be addressed?

Also, what is the best current workaround? Our content managers work primarily on mobile... Such a pain, let me tell you

Unfortunately I don't. And I can't say much more than that regrettably.

What I can say is im totally aligned with this being a requirement & agree we need to resolve it. We're trying our best to push this forward. I'll update the ticket when I have more information.

In the meantime the more action it gets on canny the more weight it has internally in discussions, so share / comment & upvote! 😊

[tyler-gits-me]

Please implement this. I really want to use strapi but am forced to use sanity for all client projects because mobile responsiveness isn't even optional in 2023. It is a necessity.

[gu-stav]

@tyler-gits-me and everyone who reads this: Please upvote the issue in our feedback tool: https://feedback.strapi.io/customization/p/responsive-administration-panel The product team looks at these numbers regularly when prioritizing work, so every vote counts.

[woteska]

+1

[ayibovShakhzod]

Hi 👋 Strapi team!

if this task is still has, can I work on it?

I will be glad if I help to improve your project.

[mvaisberg]

Are there a way to do it our self to our projects or strapi is hard to customize for mobile?