zmuxuny opened a new issue, #5548: URL: https://github.com/apache/rocketmq-dashboard/issues/5548
### Before Creating the Bug Report - [x] I have searched the [open issues](https://github.com/apache/rocketmq-dashboard/issues) of this repository and believe that this is not a duplicate. - [x] This is a defect in RocketMQ Studio, not a usage question and not a defect in another Apache RocketMQ repository. - [x] I can reproduce this on the current `master` branch, or I have stated the exact version I am running below. ### Studio Version Originally reported on the `rocketmq-studio` branch on 2026-09-23. The current fix in #5025 was validated against `rocketmq-studio@6a68042fa73a513f40436ca721944b4de48181ec` on 2026-10-04; its PR records the precise tested head and limitations. ### Runtime Environment Studio frontend in a browser at a 375px-wide viewport. Historical verification used Chrome at 320px, 375px, 767px, 768px and 1280px. The layout failure is independent of MySQL. ### Connected RocketMQ Cluster No specific cluster version or access mode is required; the defect is in the frontend shell and message-query layout. ### Build Toolchain _No response_ ### Describe the Bug `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. The shell uses a fixed `Sider width={220}` without a breakpoint and a fixed-width top-bar search control in `web/src/layouts/MainLayout.tsx`. ### Steps to Reproduce 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. ### What Did You Expect to See? 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. ### What Did You See Instead? The fixed sidebar leaves only roughly 155px for content at 375px, while the 280px search control and page controls are clipped. ### Additional Context ### Previous report and current fix (2026-10-04) This replaces [#5024](https://github.com/apache/rocketmq-dashboard/issues/5024), automatically closed by `github-actions[bot]` for inactivity on 2026-10-04. The closure was a stale-workflow action, not a maintainer rejection of the reported defect. The existing fix PR is [#5025](https://github.com/apache/rocketmq-dashboard/pull/5025), which remains open. October 4 validation, dated CI results, and remaining limitations are recorded there. Overall CI is not green. ### Historical verification (2026-09-26) The earlier PR report recorded 39 focused tests passing plus Chrome checks at 320px, 375px, 767px, 768px and 1280px. These browser checks are historical: fresh October 4 real-browser/mobile verification was blocked, as disclosed in #5025. Regression scope: 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. ### Are You Willing to Submit a Pull Request? - [x] Yes, I am willing to submit a pull request. -- 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]
