panels for too small viewport

[dg]

No description provided.

[JanTvrdik]

Super cool but unfortunately a BC breaks for every panel that assumed scrollbars on .tracy-inner. So for example Nextras Mail Panel is broken by this change.

---

Not only it is a BC break, I don't think I can make Nextras Mail Panel compatible without some very ugly JS hacking. By moving the overflow to element I can't style I am basically fucked.

[adrianbj]

@JanTvrdik - oh yeah - I didn't see that - all my custom panels use tracy-inner like that too. Now the title at the top of the panel scrolls with the content. I actually tried this approach initially when trying to deal with this and came to the same realization :)

[dg]

What exactly is the problem?

[adrianbj]

There may be more to it in @JanTvrdik's case, but for me it is simply that you can't keep the panel <h1> header sticky at the top because the entire panel is now scrolling, not just tracy-inner. This prevent easy access to by able to move, close, and swap to a popup window without having to scroll to the top of the panel.

[JanTvrdik]

@dg I need to have (for Tracy 2.3) reserved space for vertical scrollbar to prevent the ugly horizontal scrollbar.

#tracy-debug .tracy-panel.tracy-mode-peek .tracy-inner.nextras-mail-panel,
#tracy-debug .tracy-panel.tracy-mode-float .tracy-inner.nextras-mail-panel {
    overflow-y: scroll;  /* reserve space for scrollbar */
}

This will make the panel in Tracy 2.4 visually inconsistent with others when viewport is large (because it will keep scrolling on .tracy-inner) and broken with ugly triple scrollbar when viewport is small

[dg]

@adrianbj It is intention because in small viewport header takes big amount of space. Dragging is now possible via border.

[JanTvrdik]

It is intention because in small viewport header takes big space for itself.

The problem is that it makes the header hard to access even when the viewport is large (height 500px+) and the panel scrolls simple because there are lot of data.

[dg]

Its pity. I don't know how to solve #184.

[adrianbj]

I am also having the horizontal scroll issue and also agree that you need access to the header all the time.

I think that #184 (comment) is a decent start to the solution - it just also needs to be called when the panel is displayed, not just when the browser is resized.

[dg]

It should be solved in CSS, problem is that you cannot define max-width: 500px and max-width: 100vh at the same time.

[JanTvrdik]

@dg Just an idea – what about applying calc(100vh - 22px) based on media query on height?

[dg]

@JanTvrdik YES!

[JanTvrdik]

👍 Works quite well. Now I'm just not sure whether we need the first commit

[adrianbj]

I am finding that I need 75, rather than 25:

max-height: calc(100vh - 75px);

It is still hidden behind the debug bar, but at least if you move left of the bar, you can see it all. With 25 I still have 50x below the bottom of the viewport.

Chrome/OSX

[JanTvrdik]

@adrianbj The updated commit uses 55px. It assumes that outside of .tracy-inner is only a single <h1> element.

[adrianbj]

With 55px I still can't see the bottom of the panel.

That's the unmodified System Info which only has a single <h1>

I just checked on Firefox and it actually looks ok.

The other problem highlighted by that screenshot is that when vertical scrollbar appears, the horizontal one also kicks in.

[JanTvrdik]

I still can't see the bottom of the panel.

That's because of the horizontal scrollbar. The only reliable solution AFAIK is to add overflow-y: scroll to .tracy-inner.

[adrianbj]

Actually it's not just because of the horizontal scrollbar - here it is in firefox - scrollbar is there, but you can still see the bottom of the panel - note the rounded corners that can't be seen in the Chrome screenshot.

[dg]

@adrianbj can you try to set overflow-y: scroll to .tracy-inner ?

[adrianbj]

Obviously that gets rid of the horizontal scrollbar, but it still doesn't let me see the bottom of the panel in Chrome.

[dg]

55px works fine in my Chrome 51, Firefox 46 and Edge on Windows, your Firefox on Mac, but it is different on your Chrome/Mac, right? And headers are exactly the same in both pictures. Weird…

I think we should use 55px because it works fine in the most browsers.