You are viewing a plain text version of this content. The canonical link for it is here.

Posted to commits@rocketmq.apache.org by "zmuxuny (via GitHub)" <gi...@apache.org> on 2026/09/23 08:51:15 UTC

[PR] [studio] fix(ui): keep navigation and message search usable on mobile [rocketmq-dashboard]

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: commits-unsubscribe@rocketmq.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

Re: [PR] [studio] fix(ui): keep MainLayout navigation and header usable on mobile [rocketmq-dashboard]

Posted by "zmuxuny (via GitHub)" <gi...@apache.org>.

zmuxuny commented on PR #5025:
URL: https://github.com/apache/rocketmq-dashboard/pull/5025#issuecomment-6335403999

Refreshed the existing branch with a non-force merge of current rocketmq-studio@127c47b0. New head 9ad7b3ce2a49282b358169ef1a4eeb1690efab5d; the published tree 03ee94814a067109a940b911dfb21a4d8735ca0d exactly matches the locally tested tree. Both Git merge-tree and GitHub now report no merge conflict.

The sole conflict was in the Menu test double: it now preserves both the mobile onClick behavior and upstream selectedKeys assertions. The net diff remains exactly four MainLayout/CSS/test/translation files. message.tsx matches current upstream byte-for-byte, page responsiveness remains in #6063, and 768px remains a MainLayout-specific choice rather than an app-wide convention.

Fresh validation: 72/72 focused tests passed across MainLayout, MainLayout.navigation, navigationSearch, MessagePage, and MessagePageAsyncState. Touched-file ESLint, Prettier, and git diff --check passed. TypeScript did not complete: the bounded 512 MiB local process was killed (exit 137). No full-suite, production-build, backend, live-service, or new browser-visual pass is claimed for this head; the previous browser results remain historical.

Exact-head CI is queued: https://github.com/apache/rocketmq-dashboard/actions/runs/39741084071 . Historical results above belong to earlier heads; overall CI is not yet verified green.

--
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: commits-unsubscribe@rocketmq.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

Re: [PR] [studio] fix(ui): keep MainLayout navigation and header usable on mobile [rocketmq-dashboard]

Posted by "zmuxuny (via GitHub)" <gi...@apache.org>.

zmuxuny commented on PR #5025:
URL: https://github.com/apache/rocketmq-dashboard/pull/5025#issuecomment-6153963564

   Additional verification on unchanged head 4b1eabfaeb178bbdd7ad5bb351e6ef51ccdc21a5: the complete frontend suite passed, 159 files / 1606 tests, exit 0 (1139.96 seconds; one fork and 768 MiB heap). This supplements the focused tests, TypeScript, lint and production artifact-license build already reported. GitHub CI for this exact head is still queued, so this local result is not an overall CI pass. No source changes or new browser visual claims.


-- 
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: commits-unsubscribe@rocketmq.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

Re: [PR] [studio] fix(ui): keep navigation and message search usable on mobile [rocketmq-dashboard]

Posted by "zmuxuny (via GitHub)" <gi...@apache.org>.

zmuxuny commented on PR #5025:
URL: https://github.com/apache/rocketmq-dashboard/pull/5025#issuecomment-6094758517

   Updated in 86ec3e87f9c8ad0c5fcfd20250638cb9133ce5ae. It withdraws the message.tsx changes and keeps only MainLayout, its CSS/tests and the navigation-button translation. The separate page-controls follow-up https://github.com/apache/rocketmq-dashboard/issues/6063 covers all identified instance/cluster pages; 768px is explicitly scoped to MainLayout and is not proposed as a project convention. Current focused tests pass 56/56, tsc/format pass and lint has 0 errors. The final artifact-license gate fails on both this tree and clean current trunk. Fresh browser rendering is still blocked before browser startup by the cloud execution environment, so the old visual pass is not being represented as current validation.
   
   The 56 passing jsdom tests cover state transitions; they are not evidence that CSS media queries render correctly. Fresh visual verification remains outstanding.
   


-- 
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: commits-unsubscribe@rocketmq.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

Re: [PR] [studio] fix(ui): keep MainLayout navigation and header usable on mobile [rocketmq-dashboard]

Posted by "zmuxuny (via GitHub)" <gi...@apache.org>.

zmuxuny commented on PR #5025:
URL: https://github.com/apache/rocketmq-dashboard/pull/5025#issuecomment-6152176521

   Refreshed the existing branch by a non-force merge of rocketmq-studio@779b8c0e. New head 4b1eabfaeb178bbdd7ad5bb351e6ef51ccdc21a5; its published Git tree matches the locally verified tree exactly.
   
   56 focused MainLayout/message-page tests passed. TypeScript, lint (0 errors, 10 existing warnings), and production build with final artifact-license verification passed. The four-file MainLayout-only scope remains; message.tsx matches upstream byte-for-byte. Page responsiveness stays in #6063. The prior browser visual checks remain historical; no fresh browser visual pass is claimed for this refresh.
   
   No full local backend/MySQL or live-broker run is claimed. Exact-head CI is queued: https://github.com/apache/rocketmq-dashboard/actions/runs/38444692656. Earlier CI failures belong to the older head. Upstream license fixes are incorporated with the gates left enabled; overall CI is not yet verified green.


-- 
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: commits-unsubscribe@rocketmq.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org