Component pop-up cut off for top-most elements

[wsw70]

Version

6.0.0-beta.6

Browser and OS info

Chrome 88 / Windows 10

Steps to reproduce

Create a basic app via quasar (https://quasar.dev/ → quasar create testvue3 --branch next), Inspect the page and select a top-most element.

What is expected?

That the pop-up describing the component is complete

What is actually happening?

The pop-up is cut off by the edge of the browser

[ygj6]

@wsw70 I Created a vue2.x app via quasar, and using vue-devtools 5.3.4 also reproduce this issue.

I found that there is no problem with the display of QHeader and QToolbar components, only QDrawer displays abnormally,

which looks like the style of the QDrawer component itself in quasar has a problem，not caused by vue-devtools.

[wsw70]

which looks like the style of the QDrawer component itself in quasar has a problem，not caused by vue-devtools

Thank you @ygj6 - I can open a bug with quasar but I am not sure I understand the problem.

It is not in the display of the component, but just the dev-tools green window (with <QDrawer> inside in white) which is cut in the middle. Shouldn't dev-tools make sure that the information it overlays (the green rectangle above) make sure it is not cut off?

[ygj6]

It is not in the display of the component, but just the dev-tools green window (with <QDrawer> inside in white) which is cut in the middle. Shouldn't dev-tools make sure that the information it overlays (the green rectangle above) make sure it is not cut off?

@wsw70 Sorry, it's my fault, after reading the source code, it should be controlled by vue-devtools style.

[ygj6]

As follows, the height of q-drawer-container is 0, which causes the display in the middle of the 0 height when vue-devtools creates <QDrawer>.

If the height of q-drawer-container is adjusted to 20px and above, everything will be OK.