New "Open isolated" encroaches on components

[aaronjensen]

Maybe it should just be moved down next to Show code?

[sapegin]

It was there and I didn’t like it. Maybe on top of the box?

[aaronjensen]

Sure, it doesn't really matter to me as long as it is out of the way.

[n1313]

Hmmm... Not good. Gotta add some margins or something for it to work.

[aaronjensen]

It looks like it would still encroach on longer text above the example. I think that there either needs to be:

1. more margin above each example so there's enough room for it.
2. more padding within each example
3. moved down below the example where there is already enough space (though it's certainly a different type of action than "Show code')
4. made less obtrusive (maybe just the arrow, the meaning of which is made known by the primary "Open isolated") and left where it is but given a translucent white background

[sapegin]

Can we replace both open links with an icon? And probably put them near component title on hover and near Show code button on hover (and not like button, just an icon with a tooltip).

[aaronjensen]

I'd be fine w/ that.

[n1313]

Do you have any particular icons in mind? Something like font-awesome, or custom ones?

[sapegin]

I think this one from Font Awesome would work:

But we need an SVG, not web font for just one icon.

[n1313]

Won't an inline base64-encoded png do instead of a separate svg file?

[sapegin]

Not in 2016 ;-) You can inline SVG as well, it’s much easier: just put it in a React component.