Media Queries not working for Multi-Panel Plugins?

Photoshop
,
6

@kerrishotts I did some tests with the ui-react-starter example, to make sure that my panel controller code is not the problem. The results are the same. I gave each panel component a className .panel and added the following CSS:

body{
  border: 8px solid white;
}

.panel {
  border: 8px solid crimson;
}
@media only screen and (min-width: 360px) {
  .panel {
    border-color: teal;
    
  }
}

So, the body should have a white border and the panel a red one, until you make it wide enough, where it should change the color. Here’s how it looks like:

As you can see, the styles added to the body are only visible in the first panel. This would not be a problem if at least every panel would have its own viewport somehow, but the global viewport (which is relevant for sizing, media queries etc), is completely based on the first panel only.

Btw, for the video, I’ve removed the line this[_root].style.height = "100vh" from the panel controller. If I bring it back, this is the result:

image
image776×447 2.52 KB

and adding height: 100vh to the .panel class results in the following:

image
image787×464 2.54 KB

I think it becomes quite clear that the viewport is coupled to the first panel, but expanded in height due to the additional panel being somewhere in the DOM. Also, viewport changes to the first panel trigger media queries across all other panels, while changing the viewport of all other panels is just ignored.

Hopefully there will be a fix for that soon. Right now the only option I see to maybe get it working would be to add the resize event to each panel, checking the size and appending some global classes like .media-s to the panel. All other components would then have to add some CSS selectors accordingly to realize the media query behavior. However, I haven’t tested this yet and it seems like quite an ugly workaround.