904806 - butter-nav element in the header covers some click elements

Status: RESOLVED WONTFIX

(Webmaker Graveyard :: Popcorn Maker, defect)

Description

[Scott [:thecount] Downe]

Not sure if this is in popcorn maker of the userbar yet. For now I'm filing it under popcorn maker.

STRs:

1. Make a popcorn window smaller. This size can depend on your screen size. When in doubt, make it smaller.
2. Try and click on "my makes"

Expected: my makes should open.
Actual: it won't let you click it.

This is because the butter-nav classed element's width is 60%. Not sure why it's width is 60%, it should instead be the width of its content. So if things overlap, visually, it would be obvious.

I tested removing the width and it worked like a charm. I don't think we need it.

Comment 1

[Scott [:thecount] Downe]

Attachment: https://github.com/mozilla/popcorn.webmaker.org/pull/166

Comment 2

[Scott [:thecount] Downe]

Comment on attachment 789788 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/166

Looks like it was caused by https://github.com/mozilla/popcorn.webmaker.org/commit/4bb54bb51c9825d99e17ddc32d72a26228e42716

Comment 3

[Matthew Schranz [:mjschranz]]

Comment on attachment 789788 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/166

There's a reason why that static width exists. This is why.

https://dl.dropboxusercontent.com/u/8586348/lol_title.png

Comment 4

[Scott [:thecount] Downe]

Comment on attachment 789788 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/166

I think I found a clearer solution. Why not just set the max-width of the title input to be something sane, in static pixels?

Using a percentage for a width isn't going to work if the content inside and around is not also in percentages.

Comment 5

[Scott [:thecount] Downe]

Comment on attachment 789788 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/166

Updates as per in person r-

Comment 6

[Matthew Schranz [:mjschranz]]

Comment on attachment 789788 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/166

Needs a rebase.

For some reason in Chrome the layout is completely broken for me.

Comment 7

[Scott [:thecount] Downe]

Comment on attachment 789788 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/166

Rebased.

Also made it work with chrome, which was setting a default position of tooltip containers when it should not. I removed the default alltogether. Only positioned containers work with tooltips (all our containers currently are positioned.)

Also had to change a right position on the container, instead of the child, as to allow clicks on the my projects (the original point of this ticket.)

Comment 8

[Matthew Schranz [:mjschranz]]

Comment on attachment 789788 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/166

Sorry, took so long to review this but with the other header changes that have landed this needs probably an awful rebase.

Comment 9

[Scott [:thecount] Downe]

Most of this is probably invalid now, too.

If there is anything in the patch worth using, I'll grab, but otherwise, this is not a hitting users anymore.

I suspect the tooltip changes might be worth having, and a tooltip for project already being saved. But yes, this is not a huge deal, so it can wait.

Comment 10

[Scott [:thecount] Downe]

This is still a somewhat an issue, but in general that header is just cluttered, which is why it is a problem.

We have other tickets to clean up the header, so closing this.