Cleanup landing page tab UI

[jasonLaster]

• The landing page tabs could line up nicely with the left sidebar tabs if we update the vertical heights.
• also we can cleanup to focus border to be less obnoxious

Should be easy to do.

[nchevobbe]

I see a great opportunity to use CSS grids here :)

[jasonLaster]

Oh nice. Would love to see that!

Let's get that in there On Mon, Jan 9, 2017 at 12:34 PM Nicolas Chevobbe [email protected] wrote:

I see a great opportunity to use CSS grids here :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/devtools-html/devtools-core/issues/72#issuecomment-271350072, or mute the thread https://github.com/notifications/unsubscribe-auth/AAPiYqegSFSlncopUUz66awmv4p0Ranbks5rQm-2gaJpZM4Lc6Dk .

[nchevobbe]

Using grid is nice here :) But I'm not pleased with the alignement of the "Firefox" element with the tab item on the right. I don't see an obvious solution to align those since the tab on the right has a variable height (if the title or the URL is long enough, they can be multiline)

I'll try to iterate a bit on the page

[jasonLaster]

Hmm, one solution would be to right align the URL on the same line as the title.

This way with a smaller font size, we should be fine. Also if you want you can do two lines for the URL:

host
url part (truncated potentioally)

e.g

http://localhost:6006
?selectedind=LandingPage&MoreStuff ...

[nchevobbe]

Yeah, I thought about it, the problem is that the title also can be multiline. This can be cropped too, I wonder how it would look

[nchevobbe]

But yeah, one thing I'll try is too have a fixed height (the same one) for the tab element and the connection one, and do some text-overflow on both the title and the URL

[jasonLaster]

sounds good.

Remember, this is nice... but not that important :)

[AnshulMalik]

Do we still want this?