People seem to have a hard time realizing the tabs are tabs

[grahamc]

A few times now I've shown people the viewer and they get stuck on the default screen showing the log about subscribing. They don't seem to notice the UUIDs show up, or realize that they should click on them.

[samueldr]

Definitely!

I'm even surprised this comment wasn't the first thing you said to me, but I did describe them as tabs seeding the thought before you even had the chance to discover the UI.

I'll be looking into ways to present them as tabs, but I'm also interested in trying to keep this all looking like a TUI, any ideas in how it could be otherwise presented?

[samueldr]

As shared on IRC

[23:16:26] <gchristensen> [...], I don't have great  ideas w.r.t. #6 but I tried something like this: https://screenshots.firefox.com/PjcF4dpi5d5vYM49/nix.samueldr.com
[23:17:02] <gchristensen> only use the first two segments of the uuid in the UI, a 14px light gray border between each "tab" 

[grahamc]

So I think:

1. make the header background lightgray (for example) https://github.com/samueldr/logger-wip/blob/master/src/styles/index.less#L53
2. make individual tabs have a declared background color of @color_header_bg
3. give individual tabs a right-margin, ex:

.app > header ul > li {
    display: inline-block;
    background: #AFFFFF;
    margin-right: 1rem;
}

I think it'd be cool to shorten up the displayed UUIDs, using something like text-overflow: ellipsis so that the header can easily accommodate three builds on a typical screen size. I tried to do this, but ran out of know-how on CSS, in particular it did funny things when I hovered.

This is roughly what I tried:

.app > header ul > li {
    display: inline-block;
    background: #AFFFFF;
    margin-right: 1rem;
    max-width: 10rem;
    overflow: hidden;
}

span {
    text-overflow: ellipsis;
    overflow: hidden;
}

but I probably missed some stuff.