Better display for screens

[dhruvkb]

Shortcomings

The information shown by the screens module is not very helpful because:

• it shows screens as widths so the only way to visualise all of them is if you have a display that's bigger than the biggest
• the width is restricted by the horizontal viewport so on a smaller window, they all look alike (picture attached)

Suggestions

I believe the module can be improved by the following changes:

• making the screens break out of the viewport and scroll (not ideal)
• hiding the sidebar and making the component full-width; inside
  • hiding screen sizes that are outside the viewport range (helpful to see the current breakpoint of the window)
• showing the current screen width and breakpoint name

[ryanaltvater]

Also, I'd like to add that when you use a custom named screen the config viewer doesn't display the correct widths. It's only when you're using the default sm, md, lg, xl that the widths display correctly.

Example:

screens: {
    'xs-max' : {'max': '575.98px'},
    'sm'     : {'min': '576px'},
    'sm-max' : {'max': '767.98px'},
    'md'     : {'min': '768px'},
    'md-max' : {'max': '991.98px'},
    'lg'     : {'min': '992px'},
    'lg-max' : {'max': '1199.98px'},
    'xl'     : {'min': '1200px'},
    'xl-max' : {'max': '1399.98px'},
},

These all display as 100% width and unlabeled.

[hacknug]

Also, I'd like to add that when you use a custom named screen the config viewer doesn't display the correct widths. It's only when you're using the default sm, md, lg, xl that the widths display correctly.

Example:

screens: {
    'xs-max' : {'max': '575.98px'},
    'sm'     : {'min': '576px'},
    'sm-max' : {'max': '767.98px'},
    'md'     : {'min': '768px'},
    'md-max' : {'max': '991.98px'},
    'lg'     : {'min': '992px'},
    'lg-max' : {'max': '1199.98px'},
    'xl'     : {'min': '1200px'},
    'xl-max' : {'max': '1399.98px'},
},

Haven't checked the codebase but I suspect this is due to this project not support object syntax for screens.

EDIT: Confirmed this is the case https://github.com/rogden/tailwind-config-viewer/blob/master/src/components/Canvas/Sections/Screens.vue