fix(layout): improve wiki article responsive layout on narrow viewports

[carlh7777]

Summary

Fix responsive layout issues on wiki article pages (header/search, tab bar, infobox, and article width) so narrow viewports no longer clip the search bar or force horizontal page scroll.

Changes in src/styles/wikipedia.css:

• Raise the two-row mobile header breakpoint from 640px to 768px; search gets a full-width row and header nav links hide on narrow screens
• Stack infoboxes full-width below 720px instead of floating a fixed 300px box beside article text
• Add horizontal scrolling to the article tab bar at ≤900px
• Make .mw-body fluid by default with min(960px, calc(100vw - 48px))
• Adjust mobile title sizing, anchor scroll offsets (98px header), and table overflow handling

Regression checks updated in scripts/check-mobile-header-search.js.

Why This Should Ship

Readers on phones and narrow tablets currently hit clipped search, cramped tabs, and side-by-side infobox layout that squeezes article text — especially on subnet pages like Subnet 5: Hone. These fixes keep Taopedia readable and navigable on mobile without changing article content or routes.

Review Notes

• Affected routes: All wiki article pages via WikiLayout.astro / [...slug].astro (e.g. /wiki/subnet_5)
• Validation: npm run test:mobile-header-search
• Visual evidence: Before/after at ~390px width on Subnet 5: Hone

| Before | After |
|
||

Before: search clipped, tabs cramped, infobox competing with body text. After: full-width search row, scrollable tabs, stacked infobox.

• Build/deploy/security: CSS + test script only; no workflow, dependency, or deployment changes

Target Branch

• This PR targets test
• This PR targets main only because it promotes test to production

Security Checklist

• No secrets, tokens, build hooks, wallet seeds, or private endpoints are included
• No unnecessary workflow, dependency, or deployment changes

[taopedia-site-maintainer]

Verdict: Close

PR #1961: fix(layout): improve wiki article responsive layout on narrow viewports

This PR changes hover-driven on-screen behavior. Code analysis confirms the visible effect only appears during the interaction, so static before/after screenshots cannot demonstrate it (an identical-looking pair is not valid evidence). A short screen recording or GIF is required.

Visual PRs need evidence in the PR description so the maintainer can review the change quickly and reliably. A deploy preview link alone is not enough.

Required evidence for resubmission:

• Page URL.
• Viewport width, especially for responsive changes.
• Action taken (the hover that reveals the change).
• Expected before behavior.
• Expected after behavior.
• A short video/GIF that shows the change happening during the interaction. Static screenshots alone are not accepted for this PR.

Changed files:

• scripts/check-mobile-header-search.js
• src/styles/wikipedia.css

CI: Checks still pending: build

Please open a new focused PR with the required evidence attached.

---

Automated review by Taopedia Site Maintainer.