Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mobile layout for storybook version 4 #4692

Closed
fibo opened this issue Nov 1, 2018 · 4 comments
Closed

Mobile layout for storybook version 4 #4692

fibo opened this issue Nov 1, 2018 · 4 comments
Labels
accessibility question / support ui

Comments

@fibo
Copy link
Contributor

fibo commented Nov 1, 2018

Mobile layout for storybook version 4

Hi, I love storybook and it is really helping me creating a React component library of React components using Bulma CSS framework.

I updated to storybook v4 and the layout on mobile has a font that ia too small, it seema to be not responsive, any hint?

Steps to reproduce

Just deploy a storybook v4 and look it on a mobile device, or see this storybook:
http://g14n.info/trunx

version of Storybook

  • @storybook/react 4.0.2

Affected platforms

Any mobile

Work summary

Please provide a responsive layout or give some tips to achieve it in a storybook build.

Who to contact

https://github.com/fibo
@fibo fibo changed the title Mobile layout fof atorybook version 4 Mobile layout foe storybook version 4 Nov 2, 2018
@fibo fibo changed the title Mobile layout foe storybook version 4 Mobile layout for storybook version 4 Nov 2, 2018
@igor-dv
Copy link
Member

igor-dv commented Nov 3, 2018

@fibo, you can change the fonts with the Theming API now

@fibo
Copy link
Contributor Author

fibo commented Nov 3, 2018

@igor-dv thanks for the hint, I tryed to modify font size, but to achieve the result I want, i.e. make it look nice on a mobile device, this meta tag (or something similar) is needed

<meta name="viewport" content="width=device-width, initial-scale=1">

hence I added a manager-head.html file as documented here with the meta tag above.

@fibo fibo closed this as completed Nov 3, 2018
@jackkoppa
Copy link

jackkoppa commented Jan 2, 2019 •
edited

Thanks @fibo - that's exactly what I was looking for. I know it's important to prevent the default <head> of the main Storybook UI from being polluted, but is there a reason that I can't think of, that this particular viewport tag isn't included by default?

I think it's a fair assessment to say that most sites being built with Storybook are intended to be responsive (i.e. will usually have the above viewport tag), and that Storybook itself is intended to be responsive after PR #3337. But without setting device-width and initial-scale for the main UI, when viewing Storybook on mobile, it will still be significantly zoomed out.

I'm sure there could be a justification I'm not thinking of, but would people be open to a PR that includes @fibo's meta tag in the default head?

EDIT: to document a bit better, here's an example of the default Storybook UI (no viewport tag, non-responsive), and when we add the viewport tag per fibo's method. Using Chrome Remote Devices for debugging, OnePlus 6t, Android 9.0

non-responsive_default_ui

responsive_ui_by_adding_viewport_tag

@fibo
Copy link
Contributor Author

fibo commented Jan 2, 2019

It would be also nice to have the navigator on mobile to be closed after click on a menu entry.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accessibility question / support ui
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@fibo @igor-dv @jackkoppa