From cfd1d1dc4394d2604dd6af224f29883ebdf5cf14 Mon Sep 17 00:00:00 2001 From: Olivier Chafik Date: Sat, 13 Dec 2025 12:12:06 +0000 Subject: [PATCH] fix: Make MCP App UIs responsive for narrow viewports (#135) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changed from min-width: 425px to: - width: 100% - max-width: 425px - box-sizing: border-box This allows the apps to shrink on narrow viewports (like mobile or when embedded in native WebViews) instead of causing horizontal scrolling. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude --- examples/basic-server-react/src/mcp-app.module.css | 4 +++- examples/basic-server-vanillajs/src/mcp-app.css | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/basic-server-react/src/mcp-app.module.css b/examples/basic-server-react/src/mcp-app.module.css index 49caa84..0c6429a 100644 --- a/examples/basic-server-react/src/mcp-app.module.css +++ b/examples/basic-server-react/src/mcp-app.module.css @@ -3,7 +3,9 @@ --color-primary-hover: #1d4ed8; --color-notice-bg: #eff6ff; - min-width: 425px; + width: 100%; + max-width: 425px; + box-sizing: border-box; > * { margin-top: 0; diff --git a/examples/basic-server-vanillajs/src/mcp-app.css b/examples/basic-server-vanillajs/src/mcp-app.css index 49caa84..0c6429a 100644 --- a/examples/basic-server-vanillajs/src/mcp-app.css +++ b/examples/basic-server-vanillajs/src/mcp-app.css @@ -3,7 +3,9 @@ --color-primary-hover: #1d4ed8; --color-notice-bg: #eff6ff; - min-width: 425px; + width: 100%; + max-width: 425px; + box-sizing: border-box; > * { margin-top: 0;