rework css media-query
rework css media-query

fixes #7355

Also limit the number of query "jump", and use variables.

In particular there was a container width discontinuity at 768 pixel

where below 768 container width is 100% and "only" 720px on wider
screen, making a jump.

So now Css media query have 3 breakpoints:
    - <540 px with  (aka -no name-)
        - colapsed menubar
        - vbox for prompt
        - 100% width container
    - 540 -> 767 (aka -xs- )
        - expand menubar
        - hbox fro prompt
    - 767 -> 991 (aka -sm-)
        - show save widget
        - fix width (768px)
    - 991+ (aka -md-)
        - extra save widget info (date time)
        - fix with of 991 px.
    - 1200+ (aka -lg-)
        - widht of 1200px.

of course we've set soem variable wrongly so this is still kinda-a-hack
as we shoudl have pushed the xs-sm limit lower instead of pushing the
nothing-xs limit up but I don't want to "fix it" now.

jupyter-widgets/ipywidgets,jupyter-widgets/ipywidgets,SylvainCorlay/ipywidgets,cornhundred/ipywidgets,SylvainCorlay/ipywidgets,SylvainCorlay/ipywidgets,jupyter-widgets/ipywidgets,cornhundred/ipywidgets,cornhundred/ipywidgets,ipython/ipywidgets,ipython/ipywidgets,ipython/ipywidgets,ipython/ipywidgets,ipython/ipywidgets,cornhundred/ipywidgets,SylvainCorlay/ipywidgets,jupyter-widgets/ipywidgets,cornhundred/ipywidgets