Improve mobile editor usability

[devkyato]

What changed

• Reworked the phone-width toolbar into three stable rows so Select, Connect, Text, Arrange, View, File, appearance, settings, and shortcuts stay reachable.
• Allowed responsive dropdowns to render outside the toolbar and aligned the leftmost menus to the viewport edge.
• Added a 390 px browser regression check that fails if any primary toolbar control is clipped.

Why

At phone widths, the wrapped toolbar used overflow: hidden, which clipped core editor controls and could also clip dropdown menus. The new layout keeps the full editing surface usable on GitHub Pages across desktop and mobile viewports.

Validation

• npm test
• npm run build
• Desktop and phone-width visual checks

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e49883dc26

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Keep the File menu within narrow phone viewports

On 320 px-wide phones, only Arrange and View are left-aligned; File retains right: 0 while its min-w-64 menu is 256 px wide. The File button's third grid column ends at roughly 213 px, so the menu starts off-screen to the left and is clipped by html, body { overflow: hidden }, making import/export and save actions inaccessible. Align File to the viewport edge (or otherwise clamp/reposition its menu) at these widths as well.

Useful? React with 👍 / 👎.