fix broken mobile layout on contact page

[ritorhymes]

Description

A table and an inline code span are breaking the layout on the contact page at the mobile breakpoint. They are both overflowing past the right page margin and causing the entire page to increase its width and become scrollable; this breaks the header and footer by creating a blank white gutter on the right margin.

This fix:

• Makes the fingerprint inside the table wrap down for each 4-character block to prevent overflow.
• Replaces the inline code with a scrollable code block to contain overflow.
• Adds a padding class to standalone code blocks.

Before and After

Before (Notice the footer broken because the page width expands past the normal margin)

After

[ritorhymes]

@katesalazar I think you're right!

It's probably better to reverse how I have it currently.

It makes sense to be able to see everything in the table at a glance. I was able to change directly inline what the fingerprint component uses to create its spaces, and now it wraps down each 4-character block without a scroll overflow or the page margin breaking. Looks much better this way.

As for the inline code block, instead of changing global rules for every instance of them, the simplest solution would be to just replace all the ones that can't fit within a 360px width with an actual code block element (which has scroll overflow already baked in). Much easier to copy and paste from that element rather than an inline code that wraps down on more than one line.

A sexier solution might be to create some sort of mobile safe code block that converts into a scrollable code block if it's too wide to fit within the parent or else just stays an inline code. But something like that'll probably have trade-offs. If it's JS there may be some visual glitches on page load, or else if it's just not a straightforward component to setup, people just might not use it... and then what's the point.

What do you think should be done for the inline code wrapping issue? (The image here uses the regular code block element)

[ritorhymes]

So as far as I've seen, the download page has the same page margin issues on mobile with the inline code element. The very first inline code about gpg would need to be replaced. And when you click to reveal the content of the OS 'verification instructions', each one has a really long fingerprint inline code which would need to be replaced too.

After making those changes to that page, I think that would be it. I can then officially certify its mobile responsiveness 🧾 and be on my way.

I think the change to the fingerprint's characters for spacing is probably fine.. but at the same time I feel like someone out there might treat it like nuclear launch codes and erupt...lol

[ritorhymes]

Pushed the new update. Thanks for your feedback

[ritorhymes]

I'm pretty content with the search that I did. But you're welcome to let me know if you notice the issue on any other pages.

[jon052885]

Should i ? ill reconsider upon request