CSS layout changed with jupyter 1.0 upgrade

[ablaagaard]

This commit

aab5071

added "display: flex" to the CSS, causing a change in layout when showing multiple elements.
Example:
sc = Sidecar(...)
with sc:
display(widgets.Label("A"))
display(widgets.Label("B"))

Used to show
A
B
Like it would in a normal output cell

Now it shows
A B

[SylvainCorlay]

Thanks! I think we probably need to set the flex direction. The goal is to basically have the same CSS as in normal outputs.

[jasongrout]

Something similar also happened over in jupyterlab/jupyterlab#6928 - not sure if it is related, but we ended up deleting a display: flex there as unnecessary.

[ablaagaard]

I've tested by just disabling "display: flex" on the jupyterlab-sidecar style in Chrome, and in my tests the behavior goes back to how it used to be, and how it is in a normal output cell. But since I don't know why it was added, it is hard for me to conclude that this is the right fix.

[ablaagaard]

As a temporary work-around for now I wrapped the sidecar output in an Output widget like this:

sc = Sidecar(...)
sc_out = ipywidgets.Output()
with sc:
display(sc_out)
with sc_out:
display(widgets.Label("A"))
display(widgets.Label("B"))

Doing this also made me think that it could have potential use-cases if Sidecar respected "layout" and "style" attributes like ipywidgets. Then my work-around might have been something like Sidecar(layout={'display': 'block'})