zmuxuny opened a new issue, #5024:
URL: https://github.com/apache/rocketmq-dashboard/issues/5024
### Problem
On the `rocketmq-studio` branch, `MainLayout` always reserves a 220px
desktop sidebar. At a 375px viewport, the main area is squeezed to roughly
155px. The header, page heading and query controls are visibly clipped, making
the console's main navigation and message search hard to use on a phone.
### Reproduction
1. Run the Studio web app and open `/instance/message` in a 375px-wide
browser viewport.
2. Observe that the left sidebar still occupies 220px and the top bar
retains a 280px search button.
3. The page content is compressed into the remaining strip and controls are
clipped. The same layout is usable at 768px and wider.
The shell currently uses a fixed `Sider width={220}` without a breakpoint
and a fixed-width top-bar search control in `web/src/layouts/MainLayout.tsx`.
### Expected behavior
At narrow widths, the main content should receive the viewport width and
navigation should remain reachable through an explicit menu control. The
search, language, theme and user controls should fit in the header. Desktop
sidebar behavior should remain available at larger widths.
### Verification
Use a real browser at 375, 768, 1280 and 1440px. Confirm the main content is
visible, mobile navigation opens and closes after selecting a route, and the
shell has no horizontal overflow.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
