BUGFIX: Show resize icon on safari for document tree

[Sebobo]

What I did

Both resize icons for the left sidebar are now visible (functionality was always there only invisible)

Resolves: #3556

How I did it

Removed the background color from the tree component itself and instead set the background colours of the parent component that define the resize option.

How to verify it

Check in all browsers whether the resize icons all properly show up.

[crydotsnake]

The resize icon is visible. But for a reason i still cant resize the document tree. I dont think I'm too stupid too catch it 🤔

But maybe this is something for another PR since this was only about the icon (?)

resize-document-tree.mov

[Sebobo]

@crydotsnake can you give more details about your browser and version?

[crydotsnake]

@crydotsnake can you give more details about your browser and version?

Safari Version 16.5.1

[Sebobo]

Ah thx, I can reproduce the issue when the window height is quite small. I will check. This fix doesn't make sense without fixing this too.

[markusguenther]

I could make the resize work in safari, but the Icons are still pretty small, and it is no good UX to resize the trees in Safari. In other browsers, it still works fine.

[markusguenther]

Ok, acceptance tests now also work :)

[Sebobo]

Will test again

[Sebobo]

I could make the resize work in safari, but the Icons are still pretty small, and it is no good UX to resize the trees in Safari. In other browsers, it still works fine.

But now the whole tree incl. the topbar scrolls? That's also wrong

[Sebobo]

So I tried a few things. The main problem is that Safari uses a higher z-index for the scrollbar of the page tree subcomponent than for the resize icon of the parent container and they overlap. I tried the trick from https://stackoverflow.com/questions/21684101/css-vertical-scrollbar-padding-left-right-in-ul-possible but that didn't work properly either.

What works is to add a padding to leftSideBar__top which makes the icon work, but scrolling looks strange then... not sure if we can fix this without Safari being fixed 🤷🏻‍♂️

[mhsdesign]

Hi whats the status on this one? We found out that the autoprefixer for safari wasn't working so maybe this is related?