[xstate/inspect]-Inspector breaks when window width is less than 640px

[computnik]

Firstly, I would like to mention that you folks are doing some great work 👍, and inspector looks really promising. While I was playing around with it, I saw this minor bug, so reporting it. Description

The inspector breaks when window.innerWidth < 640px, and shows "Unexpected error occured" Expected Result

Resize shouldn't break UI Actual Result

It says "Unexpected error occurred" (See image below)

Reproduction

1. Open default Xstate inspector CodeSanbox example
2. Open Inspector
3. Resize the window to less than 640px, to see/reproduce the error

Additional context

Please see the video below to see issue reproduction

[hemanth]

This would be an issue on xstate-viz?

Getting a 404 on xstate-inspect#readme.

[computnik]

This would be an issue on xstate-viz?

Getting a 404 on xstate-inspect#readme.

@hemanth I think its in viz branch https://github.com/davidkpiano/xstate/tree/viz/packages/xstate-inspect

[davidkpiano]

Firstly, I would like to mention that you folks are doing some great work 👍, and inspector looks really promising.

Thank you!

I could not reproduce this issue. Can you please create a CodeSandbox?

[computnik]

@davidkpiano i can see the issue on the default codesandbox https://codesandbox.io/s/xstate-viz-template-f3dtr Now i see its turning to a black blank screen instead of that error when width <= 640px

[johtso]

Had a poke around and this seems to be the offending CSS:

@media(max-width:40rem) {
 [data-xviz=inspector]>[data-xviz=service] {
  display:block
 }
 [data-xviz=inspector]>[data-xviz=service][data-xviz-view=graph]>:not([data-xviz=machine]),
 [data-xviz=inspector]>[data-xviz=service][data-xviz-view=state]>:not([data-xviz=state]) {
  display:none
 }
}

[johtso]

Oops, saw a familiar bug while exploring youtube 🤣 (great video by the way) https://youtu.be/onEGFGNHEV0?t=1388

But yeah.. I think just removing the display: none rule for now is probably a good step. Things do get a bit unusable when the window is too narrow.. but that's trickier css/design problem to solve (maybe have a portrait mode with the events displayed above the machine?).