[I] [Bug] The dead-letter detail table's width budget leaves out its row-expand column [rocketmq-dashboard]

["Frun1na (via GitHub)" <gi...@apache.org>]

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

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

Re: [I] [Bug] The dead-letter detail table's width budget leaves out its row-expand column [rocketmq-dashboard]

["github-actions[bot] (via GitHub)" <gi...@apache.org>]

github-actions[bot] closed issue #6812: [Bug] The dead-letter detail table's width budget leaves out its row-expand column
URL: https://github.com/apache/rocketmq-dashboard/issues/6812


-- 
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: [I] [Bug] The dead-letter detail table's width budget leaves out its row-expand column [rocketmq-dashboard]

["github-actions[bot] (via GitHub)" <gi...@apache.org>]

github-actions[bot] commented on issue #6812:
URL: https://github.com/apache/rocketmq-dashboard/issues/6812#issuecomment-6355266574

   This issue has been automatically closed because there has been no activity for 7 days. If you believe this issue is still relevant, please reopen it with updated information.


-- 
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