Fix/mobile example layout

[soamdesai-tfh]

Summary

• fix narrow mobile layout in the Next.js example and arena by stacking config rows and preventing long values from overflowing
• apply matching mobile overflow fixes to the browser example
• make light-mode form controls and tooltip triggers readable

Testing

• verified Next.js / and /arena at 390x844, 360x740, 412x915, and desktop widths
• verified browser example at the same mobile widths
• confirmed document.documentElement.scrollWidth <= window.innerWidth on tested mobile pages
• checked light and dark theme control contrast on Next.js and browser examples
• checked mobile tooltip popovers stay inside the viewport

---

Note

Low Risk
Example-only stylesheet changes with no runtime or API impact.

Overview
Improves mobile layout and horizontal overflow in the IDKit browser and Next.js example UIs (including arena pages that use globals.css).

Both demos add --control-* theme variables so inputs/selects and readonly fields use dedicated colors; light mode gets white controls and clearer disabled styling. Tooltip triggers in Next.js now use --button-text for contrast.

Shared fixes include min-width: 0 / max-width: 100%, overflow-wrap: anywhere on long monospace strings, and a @media (max-width: 700px) block that stacks config rows full-width, allows button text to wrap, adjusts padding under the fixed theme toggle, and (Next.js) keeps tooltip popovers within the viewport.

^{Reviewed by Cursor Bugbot for commit 808356f. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

@soamdesai-tfh is attempting to deploy a commit to the Worldcoin Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
idkit-js-example	Ready	Preview, Comment	Jun 9, 2026 1:48am