fix(layout): broken mobile margins on release page

[ritorhymes]

Description

On mobile screen sizes, inline codes inside of downloadkeys and each of the OS verification instructions are overflowing and breaking the right page margin causing the entire page's width to increase on mobile screen sizes and become scrollable; this also breaks the header and footer. The OS instructions currently break the page margin only when details is opened to reveal its content.

Rather than edit global behaviors for inline code to wrap down or become scrollable on overflow, the simplest solution is to just replace them with fenced code blocks; most of the other code blocks there are already that type anyway so it appears more consistent. The inline code for downloadkeys when replaced with a fenced code block apparently would not become scrollable despite applying different several techniques including with inline styling, so ultimately I opted to make that particular code block just wrap down.

This fix will:

• replace overflowing inline code in details with scrollable fenced code blocks.
• replace gpg inline code with fenced code block for stylistic consistency.
• replace downloadkeys inline code with a fenced code block that wraps down (since horizontal scroll proved unreliable).

No global styling changes are made

Even though on smaller screens the downloadkeys code snippet wraps down onto a second line, it still copy-pastes as a single string, the effect is purely visual.

Tested the fix with Chrome and Firefox on desktop and mobile app versions; the page now behaves as expected.

Before - downloadkeys - 400px screen size

After - downloadkeys - 400px screen size

Before - Instructions

After - Instructions

[katesalazar]

Concept ACK