Skip to content

Commit cfd1d1d

Browse files
ochafikclaude
andauthored
fix: Make MCP App UIs responsive for narrow viewports (#135)
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 <noreply@anthropic.com>
1 parent 8448ffe commit cfd1d1d

File tree

2 files changed

+6
-2
lines changed

2 files changed

+6
-2
lines changed

examples/basic-server-react/src/mcp-app.module.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
--color-primary-hover: #1d4ed8;
44
--color-notice-bg: #eff6ff;
55

6-
min-width: 425px;
6+
width: 100%;
7+
max-width: 425px;
8+
box-sizing: border-box;
79

810
> * {
911
margin-top: 0;

examples/basic-server-vanillajs/src/mcp-app.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
--color-primary-hover: #1d4ed8;
44
--color-notice-bg: #eff6ff;
55

6-
min-width: 425px;
6+
width: 100%;
7+
max-width: 425px;
8+
box-sizing: border-box;
79

810
> * {
911
margin-top: 0;

0 commit comments

Comments
 (0)