fix(examples): improve mobile support for map, pdf, and threejs examples#555
Merged
ochafik merged 4 commits intomodelcontextprotocol:mainfrom Mar 18, 2026
Merged
Conversation
- map-server: fullscreen button respects safe area insets, hover/opacity pattern with always-visible on touch devices - pdf-server: fit-to-width scale for narrow viewports, responsive toolbar with compact controls on mobile, safe area in fullscreen toolbar via CSS custom properties - threejs-server: fullscreen button respects safe area and always visible on touch, ResizeObserver for responsive width, host containerDimensions for fullscreen height, no container padding in fullscreen, replace useHostStyles with inline style application to avoid overwriting onhostcontextchanged handler
@modelcontextprotocol/ext-apps
@modelcontextprotocol/server-basic-preact
@modelcontextprotocol/server-basic-react
@modelcontextprotocol/server-basic-solid
@modelcontextprotocol/server-basic-svelte
@modelcontextprotocol/server-basic-vanillajs
@modelcontextprotocol/server-basic-vue
@modelcontextprotocol/server-budget-allocator
@modelcontextprotocol/server-cohort-heatmap
@modelcontextprotocol/server-customer-segmentation
@modelcontextprotocol/server-debug
@modelcontextprotocol/server-map
@modelcontextprotocol/server-pdf
@modelcontextprotocol/server-scenario-modeler
@modelcontextprotocol/server-shadertoy
@modelcontextprotocol/server-sheet-music
@modelcontextprotocol/server-system-monitor
@modelcontextprotocol/server-threejs
@modelcontextprotocol/server-transcript
@modelcontextprotocol/server-video-resource
@modelcontextprotocol/server-wiki-explorer
commit: |
…el/fix-safe-area-maps # Conflicts: # examples/map-server/mcp-app.html # examples/threejs-server/src/threejs-app.tsx
ochafik
approved these changes
Mar 18, 2026
Comment on lines
+72
to
+81
| const root = document.documentElement; | ||
| if (params.theme) { | ||
| root.setAttribute("data-theme", params.theme); | ||
| root.style.colorScheme = params.theme; | ||
| } | ||
| if (params.styles?.variables) { | ||
| for (const [k, v] of Object.entries(params.styles.variables)) { | ||
| if (v !== undefined) root.style.setProperty(k, v as string); | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
nit/follow-up: let's extract an applyHostStyle(ctx: McpUiHostContext) helper
ochafik
pushed a commit
that referenced
this pull request
Mar 18, 2026
Extract an applyHostStyle(ctx: McpUiHostContext) helper that wraps the SDK's applyDocumentTheme and applyHostStyleVariables, eliminating duplicated inline style-application logic between the onhostcontextchanged handler and the initial useEffect. Also consolidates two useEffect hooks (both depending on [app] and calling getHostContext()) into one. Follow-up to #555.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Improve mobile support across several example MCP apps. Includes changes from #554 (touch gesture fixes).
Touch gesture fixes
On touch devices, drag/pan gestures inside WebGL-based example apps were propagating to the parent scroll view. Added non-passive touchstart/touchmove handlers with preventDefault() on interactive canvas elements.
Affected examples: map-server, threejs-server, wiki-explorer-server, shadertoy-server
Safe area, fullscreen, and responsive fixes
map-server
pdf-server
threejs-server
Closes #554