From 38700307545e5d015613bba26306149e5af20e98 Mon Sep 17 00:00:00 2001 From: Olivier Chafik Date: Thu, 11 Dec 2025 14:50:25 +0100 Subject: [PATCH] fix: Make MCP App UIs responsive for narrow viewports 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 49caa845..0c6429aa 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 49caa845..0c6429aa 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;