Frun1na opened a new issue, #6806: URL: https://github.com/apache/rocketmq-dashboard/issues/6806
### 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 topic service in a unit test; no broker or proxy was contacted ### Describe the Bug The topic comparison dialog budgets its table `48px` short of what the table renders. `TopicConfigComparisonModal` (`web/src/components/TopicConfigComparisonModal.tsx:400`, added in #6692) declares the budget as `scroll={{ x: tableScrollX(columns) }}` with `tableLayout="fixed"`, and the table also renders the row-expand column (`expandable`, line 410) that antd adds for rows with differences. That column is not part of `columns`, so `tableScrollX` does not see it unless the caller passes `{ expandable: true }` - which is what the helper's `EXPAND_COLUMN_WIDTH` (48px, `web/src/utils/table.ts:56`) and its option exist for. The budget therefore comes out as `240` (the Topic column's `minWidth`) `+ 120` (status) `+ 130` (difference count) `= 490px`, while the table renders `490 + 48 = 538px` of columns. Under `table-layout: fixed` the table width is the container width and the fixed columns keep their declared widths, so on a body narrower than 538px the flexible Topic column is what absorbs the deficit: it renders `container - 298px`, below the `minWidth: 240` floor its own column definition declares. A narrow window (roughly a viewport under 620px, where the modal body's inner width `min(960, 100vw - 32px) - 48` drops below 538px) therefore ellipsizes the topic name earlier than the column's own budget claims, instead of keeping the declared 240px and scrolling the table horizontally inside the modal. The two other tables in the app that render expandable rows pass the option and are correct: `web/src/pages/home/dashboard.tsx:408` and `web/src/pages/instance/consumer.tsx:1651`. ### Steps to Reproduce 1. Run the unit test that reads the table's declared budget from the rendered dialog: `cd web && npx vitest run src/components/__tests__/TopicConfigComparisonModal.test.tsx -t declaresAScrollBudget` 2. Observe the assertion failure against the recorded `490px`: the dialog renders `538px` of columns (three declared widths plus the 48px expand column) while its declared table width is 490px. 3. In a browser: open Topic management, open the comparison dialog, start a comparison, and narrow the window below roughly 620px - the Topic column shrinks past the 240px it declares, and the table never enters its own horizontal scroll area. ### What Did You Expect to See? The table's declared width covers every column it renders, so the dialog scrolls its table horizontally once the body is narrower than the columns and keeps the Topic column at its declared 240px floor - the behaviour `tableScrollX`'s `expandable` option and `web/src/utils/table.ts` document. ### What Did You See Instead? The declared budget is 490px while 538px of columns are rendered; on narrow windows the Topic column is compressed below its declared floor and long topic names are ellipsized earlier than the declared budget says. ### 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]
