Frun1na opened a new issue, #6812: URL: https://github.com/apache/rocketmq-dashboard/issues/6812
### 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 `rocketmq-studio` branch, or I have stated the exact version I am running below. ### Studio Version branch: `rocketmq-studio` git commit id: `a92c2314` deployed as: reproduced by a unit test against that commit ### Runtime Environment OS: Ubuntu on WSL2 (linux/amd64) MySQL: not applicable - the defect is in the web client's table width budget browser (for UI issues): not applicable - reproduced in a jsdom unit test (vitest + Testing Library) ### Connected RocketMQ Cluster not applicable - reproduced with a stubbed dead-letter service in a unit test; no broker or proxy was contacted ### Describe the Bug The dead-letter detail table budgets `48px` less than the table it renders. `DLQPage`'s message detail table (`web/src/pages/instance/dlq.tsx:1029`) declares `scroll={{ x: tableScrollX(detailColumns, { selection: true }) }}` with `tableLayout="fixed"`, and the same table renders the row-expand column (`expandable`, line 966, which shows the message's user properties). That column is rendered by antd and is not part of `columns`, so `tableScrollX` only accounts for it when the caller passes `{ expandable: true }` - the option whose `EXPAND_COLUMN_WIDTH` is 48px (`web/src/utils/table.ts:56`). The declared budget therefore comes out as `1130` (the eight declared column widths: 240 + 90 + 90 + 90 + 160 + 140 + 220 + 100) `+ 32` (the selection column of a `size="small"` table) `= 1162px`, while the table renders `1162 + 48 = 1210px` of columns. No column of this table is left flexible, so under `table-layout: fixed` the deficit is taken out of every declared width: the columns are laid out at 1162/1210 of their declared size (about 4% narrower, e.g. the 240px Message ID column renders at 230px), and - because the declared table width is the smaller number - the table only starts scrolling inside its own wrapper once the container drops below 1162px instead of the 1210px it actually needs. The two tables in the app that already pass the option show the correct amount (`web/src/pages/home/dashboard.tsx:408`, `web/src/pages/instance/consumer.tsx:1651`), and the same omission was just corrected for the topic comparison table in #6808. ### Steps to Reproduce 1. Run the unit test that reads the detail table's declared budget from the rendered dialog: `cd web && npx vitest run src/pages/instance/__tests__/DLQPage.test.tsx -t declaresAScrollBudget` 2. Observe the assertion failure against the recorded `1162px`: the dialog renders 1210px of columns (1130 declared widths + 32 selection + 48 expand) while its declared table width is 1162px. 3. In a browser: open a dead-letter group's message detail and narrow the window until the table area is under 1210px - the columns render below their declared widths and the table has not entered its own horizontal scroll area yet. ### What Did You Expect to See? The table's declared width covers every column it renders - including the 32px selection column and the 48px expand column antd adds around `columns` - so the declared widths are what renders, and the table scrolls inside its wrapper once the container is narrower than them. ### What Did You See Instead? The declared budget is 1162px while 1210px of columns are rendered, so every column is laid out about 4% below its declared width and the internal horizontal scroll starts 48px late. ### Additional Context A fix with a regression test follows in 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]
