Frun1na opened a new issue, #6774: URL: https://github.com/apache/rocketmq-dashboard/issues/6774
### 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: a92c23144408cdf5729707050e9ecd9b75f1bad0 deployed as: reproduced by a unit test against that commit ### Runtime Environment not applicable — the defect is in the instance table's column budget, reproduced with a jsdom unit test that reads the rendered `<colgroup>` ### Connected RocketMQ Cluster not applicable — reproduced with a stubbed instance service in a unit test ### Describe the Bug The instance list table (`web/src/pages/instance/index.tsx`) is the last table in the console whose timestamp columns still declare the pre-#6633 width of 150px, and its action column declares 150px for a button group that needs 154px. 1. `gmtCreate` and `gmtModified` (lines 643-665) declare `width: 150` and render `formatDateTime(d)`, i.e. `YYYY-MM-DD HH:mm:ss` at `fontSize: 14`. The project's own measurement for that label is 140px, and a `size="small"` cell adds 8px of padding per side, so the column needs 156px — the figure #6633 (`e2f815fb`) applied to the same 150px timestamp column in `alerts.tsx` and to `dlq.tsx` / `systemAlerts.tsx`. At 150px the content box is 134px, the 140px label does not fit, and neither column carries `ellipsis`, so the value wraps at its own space and the row grows to two lines. 2. `actions` (line 667) declares `width: 150` and right-aligns two `size="small"` buttons (edit, delete). Each button measures 66px (the figure #6692 measured for four-button action columns), plus the 6px `gap` and 16px of cell padding, so the cell needs 154px. At 150px the content box is 134px against a 138px button group, so the right-aligned pair overflows 4px to the left and overlaps the updated-time column. ### Steps to Reproduce Run the new unit test against a92c2314: ``` cd web && npx vitest run src/pages/instance/__tests__/InstancePage.test.tsx ``` It renders the instance page and maps each column header to its `<colgroup>` width; the timestamp assertions report `Expected: "156px" / Received: "150px"`. In a browser: open the instance list at a 1600px viewport; the created/updated cells wrap `2026-08-01 10:00:00` onto two lines, and the two row buttons sit 4px over the updated-time column's right edge. ### What Did You Expect to See? The two timestamp columns sized like every other small table in the console (156px), and the action column sized to its two buttons (154px), so the timestamps stay on one line and the buttons stay inside their cell. ### What Did You See Instead? The two timestamp columns declare 150px, one measurement step below the figure #6633 standardized for the same label hours earlier, and the action column declares 150px against a 154px cell content requirement. ### Additional Context A fix with a regression test follows in a pull request. ### Are You Willing to Submit a Pull Request? - [x] Yes, I am willing to submit 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]
