btlqql opened a new pull request, #5338:
URL: https://github.com/apache/rocketmq-dashboard/pull/5338
### Which Issue(s) This PR Fixes
- Fixes #5024
### Brief Description
`web/src/layouts/MainLayout.tsx` rendered `<Sider width={220}
collapsedWidth={64}>` with no
breakpoint and a top-bar search control with a fixed `width: 280`. At a
375px viewport the shell
therefore kept the 220px sidebar and a 280px search button, squeezing the
content into ~155px and
clipping the header.
The Sider now carries `breakpoint="lg"` and `collapsedWidth={0}`: below the
`lg` breakpoint antd
collapses it to zero width (`.ant-layout-sider-zero-width`) and renders the
explicit zero-width
control (`.ant-layout-sider-zero-width-trigger`), which reopens the
navigation on click; at desktop
widths the sidebar stays at 220px exactly as before. The header search
control additionally
declares `flex: '0 1 280px'`, so it shrinks with a narrow header instead of
imposing 280px — the
same shrinkable-search pattern already used in
`web/src/pages/ops/notificationDeliveries.tsx`.
### How Did You Test This Change?
`web/src/layouts/MainLayoutResponsive.test.tsx` renders the real antd shell
(the sibling
`MainLayout.test.tsx` stubs antd, so it cannot observe Sider responsive
behaviour) with
`window.matchMedia` answering antd's `screen and (max-width: 991.98px)`
query for a narrow viewport.
It pins the collapse to zero width, the presence of the explicit control and
that clicking it
restores the 220px sidebar, the unchanged desktop sidebar, and the
shrinkable declaration of the
search control. The file was created and run first on the unmodified tree
(red), then after the fix
(green), together with the pre-existing layout suite.
```
$ cd web && npx vitest run src/layouts/MainLayoutResponsive.test.tsx
# before the fix (the file was added to the unmodified tree)
FAIL src/layouts/MainLayoutResponsive.test.tsx > MainLayout viewport shell
> gives a narrow viewport the whole width and keeps navigation behind a control
Error: expect(element).toHaveClass("ant-layout-sider-zero-width")
Expected the element to have class:
ant-layout-sider-zero-width
Received:
ant-layout-sider ant-layout-sider-light ant-layout-sider-has-trigger
css-dev-only-do-not-override-mncuj7
FAIL src/layouts/MainLayoutResponsive.test.tsx > MainLayout viewport shell
> declares the header search control as shrinkable instead of fixed at 280px
AssertionError: expected '' to be '0 1 280px' // Object.is equality
Test Files 1 failed (1)
Tests 2 failed | 1 passed (3)
# after the fix
$ cd web && npx vitest run src/layouts/MainLayoutResponsive.test.tsx
src/layouts/MainLayout.test.tsx
✓ src/layouts/MainLayoutResponsive.test.tsx (3 tests) 1404ms
✓ src/layouts/MainLayout.test.tsx (5 tests)
Test Files 2 passed (2)
Tests 8 passed (8)
$ cd web && npx tsc -b # exit 0, no diagnostics
$ cd web && npx eslint src/layouts/MainLayout.tsx
src/layouts/MainLayoutResponsive.test.tsx src/layouts/MainLayout.test.tsx
# exit 0, no problems
```
Limitation, stated plainly: jsdom has no layout engine, so this suite cannot
measure the rendered
width of the page content or check for a horizontal scrollbar; it pins
antd's responsive
collapse/expand behaviour and the declared flex behaviour of the search
control, not pixels. The
375/768/1280/1440px browser pass the issue asks for was not performed here.
### Checklist
- [x] One coherent change; unrelated modifications are not bundled in
- [x] Commit subject follows Conventional Commits
- [x] Tests added or updated for non-trivial changes
- [ ] New UI text has both Chinese and English entries under `web/src/i18n/`
— not applicable: the
change adds no user-facing string (the zero-width control reuses
antd's own icon)
- [x] Architecture constraints stay green — no `server/**` file is touched,
so the ArchUnit checks
are unaffected; `npx tsc -b` and `npx eslint` are clean
- [x] New source files carry the ASF license header —
`MainLayoutResponsive.test.tsx` carries it
- [ ] Documentation touched where behaviour changed — not applicable: the
shell layout is not
described in README or `docs/`
--
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]
