Sidebar reorder blocked by component overlay

[melanieseltzer]

Describe the bug

@AWolf81 identified an issue while working on #375 where the Infobar component is blocking the dragging of a sidebar project.

I think this is Windows-specific because I cannot reproduce in Mac (unsure about Linux).

To Reproduce

1. Be on Windows
2. Try to drag the project near top of the window
3. Infobar component is sitting on top, preventing the drag

Screenshots

Screenshot from PR (Windows):

My view (Mac):

[Canopix]

I'm trying to reproduce this bug but I am not able to see it on Windows. It's already fixed?

[AWolf81]

@Canopix This issue is still present. The component in question is Titlebar. You need at least two projects in Guppy and then reduce the screen height until the first item is close to the top edge of the window.

In the screenshot below I've added a border to the titlebar to make it visible:

Not sure why it is there & invisible. There is a comment in the component like following:

The title bar in this app is invisible, and yet it still needs to be defined, as it constitutes the "draggable" area of the window.

But I don't know what draggable area means. Is this a Mac thing? On Window this is not needed or am I missing something? @joshwcomeau

The Titlebar component is used in App.js I've commented it and I haven't noticed any difference beside that the sidebar buttons are clickable.

[Canopix]

Thanks, @AWolf81 I tried reducing the screen height from the top and from the bottom, and this is the result:

[AWolf81]

@Canopix Then scroll the sidebar (mousewheel or scrollbar) so that the icon is close to the top menubar - like in my screenshot. After hovering you should notice that the mouse icon is not changing and dragging is not possible.

[Haroenv]

I think the titlebar should be only present on platforms without window chrome (i.e. only Mac)

[AWolf81]

@Haroenv thanks, I think now I understand why it is there. It is adding the three dots on Mac as window bar, right? So adding a conditional render will fix this issue. By changing line App.js:l39 to {isMac && <Titlebar />} it should be fixed. isMac can be imported from platform.service

@Canopix if you like you can add this and check if it's fixing the issue? Mac os testing will be done during PR.

[Haroenv]

the three dots are native I think, but the title bar component is there to make sure you can drag the window all along the top

[Canopix]

@AWolf81 Issue fixed, I did that you mentioned about it. There is a new PR now 😄

[melanieseltzer]

Closed in #383