Make tab close button respect tab's container

[cezaraugusto]

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Ran git rebase -i to squash commits (if needed).

Fix #5431

Auditors: @bbondy, @bsclifton

Note:

This change fixed the issue, but affected tab icons on small windows (now being overflowed in a different way). Doesn't look weird imo but can be improved per team's request.

Test Plan:

• Reduce window's width checking for close button on tabs
• Close button should not overflow tab container on narrow views, avoiding UI mismatch

[bbondy]

A bit worried this will break some tests at small window sizes

[bbondy]

which maybe travis has?

[bbondy]

hard to tell because our tests are so broken right now.

[bsclifton]

I think a better way to solve this would be to consider the size of the tab itself

.tabArea:not(.partOfFullPage) could use a min width, so that it never gets smaller than the favicon (28px seems to work nicely)

You can then solve the actual issue w/ .closeTabButton by setting overflow: hidden. It'll auto-hide when the parent isn't big enough to accommodate the button (however, it'll need some playing around, as sometimes the button gets cut off- might need a margin-right)

Since I don't think this should be rushed and it's not critical for next release, I'm going to assign it to 0.12.10

[cezaraugusto]

PR updated

[bbondy]

Seems like an improvement but it doesn't get rid of the (x) and it makes the favicons get cut off when smaller. @bradleyrichter is this the way you want it?

[bradleyrichter]

@bbondy no, they should actually end up looking like fat pinned tabs, and eventually the same, but of course in the main tab area.

[cezaraugusto]

PR updated

We now have close button centered filling tab's width on small (< 770px) screens:

[bradleyrichter]

Much better…

Is it possible to have the close button appear on the right?

On Nov 21, 2016, at 6:21 AM, Cezar Augusto [email protected] wrote:

PR updated

We now have close button centered filling tab's width on small (< 770px) screens:

https://cloud.githubusercontent.com/assets/4672033/20485946/ee8a53de-afe4-11e6-8428-0cde3d1bb4b8.png
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub #5480 (comment), or mute the thread https://github.com/notifications/unsubscribe-auth/AM4jqudbAQO-qYWLA_puvUnvqEwr3tJrks5rAajUgaJpZM4Kr7Av.

[cezaraugusto]

@bradleyrichter you mean something like this?

If not, could you do a quick draft about how do you want it?

[cezaraugusto]

Closing in favor of #5845