Storybook: Mobile layout for storybook version 4

Created on 2 Nov 2018 · 4Comments · Source: storybookjs/storybook

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

accessibility question / support ui

Source

fibo

Most helpful comment

@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 on 3 Nov 2018

🎉6

All 4 comments

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

igor-dv on 3 Nov 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 on 3 Nov 2018

🎉6

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