Improve responsive layout for Japanese modes and small viewports

[basujindal]

Motivation

• Prevent mode buttons from overflowing on small screens and improve spacing/readability of the Japanese study page at narrow breakpoints.

Description

• Change .jp-modes layout to use responsive grid columns with repeat(3, minmax(0, 1fr)) at max-width: 768px, repeat(2, minmax(0, 1fr)) at max-width: 480px, and a single-column stack at max-width: 340px while adjusting gaps.
• Update .jp-mode to include min-width: 0, min-height, adjusted padding, box-sizing: border-box, and row-oriented layout on very small screens to avoid content clipping.
• Tweak typography for .jp-mode-name and .jp-mode-icon sizes and add page side padding for small viewports.
• Add a dedicated @media (max-width: 340px) rule to ensure the modes collapse into a single column and clear grid placement on the last child.

Testing

• Ran the CSS linter with stylelint and it completed without errors.
• Ran the frontend test suite with npm test and all tests passed.

---

Codex Task