Fix for Safari (hide button not visible)

p0358 commented 4 years ago

Apparently the hide button was not visible on Safari. After some research it seems that Safari hides position: fixed elements if parent has overflow hidden... I kept the button itself intact (to not risk that changes will render it positioned wrongly on some screens), and instead changed parent's overflow-y to visible and came up with these changes to keep everything working and looking the same (hopefully):

.panel div got overflow-y changed from auto to visible (this rendered the hide button visible on Safari, but broke scrolling)
.panel-content class was created to set properties on it (position absolute, width, height and overflow-y moved there to have the scrollbar there)
.panel-content has width: calc(100% - 5px); because we compensate for the left padding of 5 px, but we want the scrollbar to be kept maximally to the right side. This is why I added .panel .panel-content > div { padding-right: 5px; } to keep the padding inside, to the left of the scrollbar. (same goes for p error element)
.panel-content has height: calc(100% - 10px); to compensate for both top and bottom paddings of 5 px (so the elements are not cut out on the bottom)
Close button had to be moved inside of content div to keep it positioned correctly, no matter if scrollbar is visible or not. (this also keeps the behavior of staying where it was while scrolling down; not being "sticky")

These changes fix the appearance of hide button on Safari, while keeping everything else looking the same way as before.

Should be tested on some mobile Android as well before merging.

Alive proof that it works now (the right empty margin is not there, GitHub did break the screenshot while uploading somehow...): obraz

jacekkow commented 4 years ago

@p0358: Would you like me trying this approach?

p0358 commented 4 years ago

@jacekkow Sorry for late reply. Yes, you can try your approach, I will be happy to test how it works

jacekkow commented 4 years ago

@p0358 Sorry, I have messed up this pull-request. Could you try safari-fix branch? (https://github.com/jacekkow/mpk-ttss/tree/safari-fix)

I had to create new PR, which is here: https://github.com/jacekkow/mpk-ttss/pull/32

jacekkow / mpk-ttss

Fix for Safari (hide button not visible) #30