"pl-c-drawer__wrapper" blocking usage of page when closed

[thethomic]

I am using Pattern Lab Node v5.4.0 on Windows, with Node v12.12.0, using a Gulp | Mustache Edition.

Expected Behavior

The page is completely usable when .pl-c-drawer__wrapper is closed

Actual Behavior

The bottom 20px are not usable due to a padding of .pl-c-drawer__wrapper.
The height is set to 0px, but that doesn't collapse the 20px padding-top.

Steps to Reproduce

close the .pl-c-drawer__wrapper, try to use an item in the patternlab that is closed to the bottom viewport.

[mfranzke]

@thethomic thanks for providing this finding. Do you have the possibility to even also support by providing a possible solution for that problem?

Danke schön ! ;-)

[thethomic]

@mfranzke Gerne! ;)
I currently can't find a reason to add the negative top-margin and the top-padding to the .pl-c-drawer__wrapper . When I remove both, the panel still works as intended and just gets a few pixels higher.

So I recommend to just remove these styles:

.pl-c-drawer__wrapper {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    will-change: height;
    overflow: hidden;
    /*margin-top: calc(-20px + 1px);*/
    /*padding-top: 20px;*/
}

[mfranzke]

@sghoweri I think UI Kit is mainly your part of knowledge here, isn‘t it?