[ndorin]

Stacked on #56, which is stacked on #55. Once those merge, this retargets to feature/vc4-support, so all three reach main in one merge and one release.

Why

On a phone, the top nav never collapsed: it was set to expand="md" with no toggle. It took about 350 px above every page. Below that, tables were cut off at the right edge, Devices squeezed its list into a third of the width, and the Debug Console toolbar wrapped one word per line.

What, on screens below 768 px (phones, and tablets in portrait)

• Top nav: below 1200 px, it folds behind a toggle. The app selector and connection light stay visible, and the menu closes after a page is picked. The brand shortens to "Dev Tools" on phones.
• Devices: the list takes the full width. Picking a device opens its detail with a "‹ All devices" link back. The Can Read and Can Write columns are hidden, and long values wrap.
• Debug Console:
  • The toolbar wraps by button.
  • The device filters show; before, they were hidden below lg.
  • Each log row is two lines: timestamp, key and level, then the message.
• Help: the sidebar folds behind a Contents button. The page also gets padding on every screen size, because it sits outside the main layout.
• API Paths: the table now scrolls, which it couldn't do on any screen size, and long names wrap.
• Plugin Load Issues and Secrets:
  • The whole page scrolls.
  • The category moves under the message.
  • Date columns are hidden.
  • Row buttons wrap.
• Routing: the toolbar wraps by control, and the minimap is hidden.
• Config viewer: no minimap and word wrap on, through a small useIsNarrowScreen hook.
• Everywhere:
  • Drawers take the full width.
  • The root uses 100dvh, so the phone browser's toolbars don't hide the bottom of the page.

Testing

• Screenshotted every page in Chrome at 390×844 against live data from an MC4, before and after. Also checked:

  • picking a device and going back;
  • a live debug session and its detail drawer;
  • the Help contents.

  Also checked at 768, 1024 and 844×390. At 1440 the desktop screenshots match main, apart from the padding added to Help.

• Loaded on an MC4 (slot 10) for testing on a real phone. A VC-4 package combined with Run Dev Tools on Virtual Control (VC-4) #55 and feat: read the debug console and routing feedback over HTTP polling on VC-4 #56 was also built.

• New tests: the Help Contents toggle and useIsNarrowScreen. One existing Plugin Load Issues test now expects the category in two places, with CSS hiding one at each screen size. All 335 tests pass, and lint, Prettier and npm run build are clean.

🤖 Generated with Claude Code