"GitHub view" text rendering problem on issues list page

[jmm]

On both the issues list and issue pages there's a paragraph at the bottom:

takes you to the GitHub view of this page.

On the list page it renders without proper spacing between the words, like:

takes you to theGitHub viewof this page.

That's in Firefox 48 / Chrome 51 Win 7.

It's a result of the display: flex styling (looks like that was introduced in #901). One solution would be to apply margin to the GitHub View link. However, perhaps it's better to just remove the display: flex? The paragraph at the bottom of the issue template doesn't have it -- it's just the default display: block. It seems like the paragraph at the bottom of the issue list template with that and text-align: right would be fine, but is there some reason it's important for that to have flex layout?

[miketaylr]

Thanks @jmm!

cc @magsout

[miketaylr]

(There's some talk of moving that keyboard hint to the side-bar w/ labels: #1104 (comment))

[jmm]

@miketaylr Thanks!

Oh yeah, I see the discussion about that. Wasn't seeing a mockup with a side-bar in that thread, but tracked down #545 (comment) that links to a mockup. It seems like those changes are pretty involved and may take some time to settle, so perhaps it makes sense to fix this in the current layout for now (I'm guessing that's what you have in mind).

[magsout]

thanks @jmm

Hum strange I don't have this issue

I tried with Firefox 48, 49 and Chrome.

It's a result of the display: flex styling (looks like that was introduced in #901)

There is no display: flex in this <p> , where do you see it ?

[jmm]

Thanks @magsout. It only manifests on the issue list page. Since you're not seeing it, and based on the background color of your screenshot, I think perhaps you're looking at the single issue page?

The <p> at the bottom of the list page (I believe this is its template) has class wc-SearchIssue-github that has display: flex set (looks like it comes from here).

[magsout]

Ah yes, here https://webcompat.com/issues my bad.. So you're right ;)

[jmm]

@magsout Cool, we're on the same page :)

[zoepage]

@magsout would it be ok for you, if I fix this? :)

[magsout]

@zoepage 👍