UI not using full window width due to place-items: center on <body> #876
Description
🐛 Bug Report
Version:
MCP Inspector v0.15.0
Environment:
Browser: Microsoft edge
OS: Windows 11
Description
When opening MCP Inspector in a browser, the UI does not expand to the full width of the window. It appears centered with extra blank space on both sides.
After inspecting the styles, this issue is caused by the following CSS rule in the tag:
body {
margin: 0;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
This centers the entire app vertically and horizontally, which restricts it from taking up the full available width.
Steps to Reproduce
Open MCP Inspector v0.15.0 in a browser.
Observe that the UI is centered and not spanning the full width.
Open Developer Tools → Elements → CSS styles.
Disable or remove the place-items: center; property from the body.
Expected Behavior
The UI should expand to the full window width (like a normal app layout).
Actual Behavior
The entire UI stays centered with empty margins on both sides due to the grid centering rule.
Proposed Fix
Remove or modify the place-items: center; property from the body element.
You can use the following fix:
body {
margin: 0;
/* Remove place-items:center to allow full width layout */
min-width: 320px;
min-height: 100vh;
}
Or simply switch the layout approach depending on design needs.
Screenshot (Optional)
Before removing place-items:center
After removing place-items:center
Additional Notes
Removing the place-items: center; instantly fixes the issue and restores normal full-width behavior.