Layouts for iPhone, iPad, MacBook and 1K/2K/4K screens

[drthyang]

Tunes the workbench layout for current Apple devices and for 1080p, 1440p and 2160p monitors.

How it was checked

A Playwright audit loaded every view at 20 viewports:

• iPhone: 16e, 17 Pro, Air and 17 Pro Max, in portrait and landscape
• iPad: mini, Air 11" and Pro 13", in both orientations
• Mac: MacBook Air 13"/15", MacBook Pro 14"/16", iMac 24", Pro Display XDR
• Monitors: 720p, 1080p, 1440p and 2160p

The views were the landing page, Rietveld, magnetic, PDF and single crystal, plus the header menus. For each one it took a screenshot and measured with getBoundingClientRect (and text ranges), looking for:

• text clipped by an overflow:hidden box
• text spilling out of its box
• overlapping text or controls
• overlapping flex/grid siblings
• horizontal page scroll

Before the change it found real overlaps and overflow on phones and tablets. After it, every view at every viewport is clean, on the dev server and on the production build.

Large screens

• Wider page cap. The content column is capped at 2560px (was 2100), so a QHD or Studio Display window is used edge to edge.
• Zoom on dense screens. The whole UI zooms (--ui-zoom): 1.125 at the XDR's 3008px, 1.5 on a 4K monitor at 100%, and 2 on 5K and up. Before, a 4K@1x screen showed sub-2mm type in a 2100px island. A height guard keeps ultrawides at 1:1.
• Zoom-dependent sizes. Viewport-unit sizes, the fixed tooltip position and the 3D canvas's pixel ratio all divide by the zoom (src/app/ui/cssZoom.ts).
• Plot text in CSS px. WorkbenchPlot now draws in CSS pixels. The old fixed 560-unit viewBox scaled every glyph with the card height, so labels were ~5px on an iPad and ~30px at 4K. At a 560px-tall plot the new layout is identical to the old one.
• Axes and legend. The y-axis margin now fits its widest label, and the number of x ticks fits the width. The last x label stays inside the plot (PDF "30.0" used to be cut off). The legend is laid out from its label widths and wraps on narrow plots.

iPhone / iPad

• Safe areas and viewport.
  • viewport-fit=cover with safe-area insets.
  • 100dvh for the shell, because iOS 100vh hid the footer under the toolbar.
  • text-size-adjust is set.
  • On iOS only, maximum-scale=1 stops the page zooming into a focused 12px input. Pinch zoom still works.
  • theme-color and home-screen web-app metas are added.
• Whole-page scrolling. When the working row stacks (≤820px wide, portrait ≤1100px, or ≤540px tall), the page scrolls as one document and the header scrolls away. It used to take about 40% of an iPhone screen.
• Header.
  • Phones and small tablets get two ordered rows instead of four wrapped ones.
  • 901–1180px fits in one row.
  • On touch screens the chip heights now match.
• Beta bar. On phones it is two lines instead of five. It still names the tools to reproduce results in and keeps the limitations link.
• Fixes.
  • The landing demo card overlapped the load cards on phones.
  • The PDF page overflowed a phone sideways (its grid had an auto column).
  • On an iPad in portrait, the stacked row shrank and the plot card's caption ran into the parameter card.
  • The summary cards left an orphan card beside a hole.
  • The touch min-height made a phase chip's × balloon.

Verification

• npm run build, npm run lint and tsc -b are clean.
• npm test: 1430 passed, 111 skipped.
• The build's large-chunk warning is pre-existing; this change adds about 1.5 kB.
• The README screenshot is regenerated.

Merging deploys the GitHub Pages demo (deploy.yml).

🤖 Generated with Claude Code

https://claude.ai/code/session_016EDizNur3M6PHzmycLpjis

---

Generated by Claude Code