zmuxuny opened a new pull request, #5025: URL: https://github.com/apache/rocketmq-dashboard/pull/5025
### Which Issue(s) This PR Fixes - Fixes #5024. ### Brief Description At a 375px viewport, the fixed 220px sidebar leaves only about 155px for Studio content. The 280px header search control also overflows that space. The message query form has fixed-width controls that remain clipped after giving the content the full viewport. Hide the desktop sidebar below 768px and expose the same navigation in a left drawer. Keep search, language, theme, and user controls in the compact header. Let the message query mode and fields wrap or scroll within the available width; preserve the existing desktop sidebar and form widths. ### How Did You Test This Change? - `npm test -- src/layouts/MainLayout.test.tsx src/pages/instance/__tests__/MessagePage.test.tsx src/pages/instance/__tests__/MessagePageAsyncState.test.tsx` (38 passed). - `npx tsc -b --pretty false`, targeted ESLint, Prettier check, `npx vite build`, and `git diff --check` pass. - In Chrome at 320px and 375px, the main column takes the full viewport, the header fits, the message query controls remain accessible, and the page has no horizontal overflow. Selecting the Message ID mode and entering a value works. - At 375px, opening the navigation drawer and choosing Settings changes the route and closes the drawer. At 768px, 1280px and 1440px, the desktop sidebar remains visible and the page has no horizontal overflow. ### Checklist - [x] Changes address one reproducible mobile usability issue - [x] Commit subject follows Conventional Commits - [x] Navigation remains localized and keyboard accessible through Ant Design Drawer/Menu -- 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]
