Styling issues with horizontally split panel

[thethomic]

I am using Pattern Lab Node v5.3.0 on Windows, with Node v12.12.0, using a Gulp/mustache Edition.

I switched the layout, so that the menu is on the left side.
This way the code panel gets shown at the bottom, where is now has double scrollbars and a little styling error.

Expected Behavior

The info Panel has just one scrollbar on the right side, the code is shown on a white background.

Actual Behavior

There are two scrollbars, the white background is ending to early, there is a white gradient showing

Steps to Reproduce

Open patternlab
switch layout to show the menu on the left side
expand "panel" with code

[bmuenzenmeyer]

Node 6 is a very outdated and unsupported platform.

Can you try upgrading to node 12.13.0 or even 10 LTS and try again?

https://nodejs.org/en/about/releases/

[bmuenzenmeyer]

Hmmm your OP mentions node 6 but no longer. What version are you on?

[thethomic]

I'm sorry 6.11.3 was the npm version..
I'm on node 12.12.0

[thethomic]

Additional Info:
Happens on latest firefox (developer edition), not in Chrome and only when code height needs to get scrollable.
The element .pl-c-tabs__content has a height: 100% which is adding up to more than 100% together with .pl-c-tabs__header

[sghoweri]

Hmmm. This definitely looks like a Firefox rendering quirk (also seeing this in Firefox 70 for OSX).

I’ll see if we can get a CSS fix for this out by the weekend!

[thethomic]

Hey!
I confirm that the described issue has been fixed!
If you're searching for perfection ;) I have another finding at the same spot for you:

When the CodePanel is scrolled, there is a nice shadow appearing at the top to indicate the covered content. That shadow has a margin to the header (where the margin should visually be coming from)
The margin-bottom of the element .pl-c-tabs__header should be removed for visual coherence.