[www/showcase] Revisit detail page header layout

[deadcoder0904]

Visit https://next.gatsbyjs.org/showcase/cardiogr-am/ & see the buttons "Visit Site" & "Share" buttons are overlapping on the site screenshot & it looks like the image is cut in or page didn't load properly. Place it somewhere nice :)

Its happening for many sites. Its overlapping Navbar Text on many sites.

[pieh]

/cc @kkemple @fk

[swyxio]

as-designed, really

[deadcoder0904]

Yep that's why I said place it somewhere nice really 😂

[fk]

Agreed. I'll give placing the "Visit Site" button next to the URL below the site title and moving the "Share" buttons into the header a go over the next days.

[fk]

Here's a very quick shot at alternative "Visit Site" and "Share" button positions for Desktop:

Alternatively we maybe could just move the two buttons to the lower right corner of the image—that'd mean only slight adjustments for Desktop vs Mobile.

That said, I think we should keep the current button positions on Mobile; I might be too precautious, but I'd rather not deal with the implications (e.g. a very long URL) of placing the buttons next (or below) text here:

[deadcoder0904]

@fk looks nice

[fk]

Posted a first stab at trying to consolidate header designs of site and starter showcase in #6710 (comment)

[gatsbot]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[fk]

Hey gatsbot, this actually has been fixed. 🎉
Thanks for reminding me! 🙏