Fix mobile portrait layout overflow and overlaps

[GuanzhouSong]

On phones (320–430px portrait) and portrait tablets, several pages render wider than the screen or overlap text:

• Every MQL reference index and category page draws names like $avg on top of their descriptions: the name column was 10% of the row (~30px). At 768px it was 20% of a narrow pane, so tablets overlapped too.
• Reference pages scroll inside a 100vh pane that sits partly under the sticky navbar, so phones get a scroll-inside-a-scroll and the pane's bottom is hidden until the page scrolls. Desktop keeps the pane; only below md does the page scroll normally.
• Docs articles pan sideways by up to 272px because long inline code and URLs (tlsAllowInvalidCertificates=true) don't wrap. Reference breadcrumbs overflow too: the separator spans carry no spaces, so the trail never breaks.
• The Getting Started primer and the /ai quick-start steps are wider than the screen, hiding the Copy buttons: a command's longest line sizes the grid column.
• The Samples and Package Finder selects are 14px, so iOS zooms in on focus.
• The blog header wraps into two or three sticky rows on phones (~155px) and orphans "Blogs" on its own row at 834px. It now collapses to a <details> menu below 1280px, the same breakpoint as the main navbar, without adding script to the blog.

Checked all 276 built pages at nine widths from 320 to 1024px for horizontal overflow and clipped content, with menus, disclosures and filters open. Desktop layouts at 1024–1440px are unchanged apart from the reference name column, which is now a fixed 12rem instead of 20%.

Not changed: the main navbar's menu can't scroll its last items into view in landscape phones (pre-existing, same cause the blog menu now avoids).