lizhimins opened a new pull request, #4211: URL: https://github.com/apache/rocketmq-dashboard/pull/4211
Closes #4208 ## Root cause rc-table only switches to `table-layout: fixed` when `scroll.y` is set, a column is `fixed`, or a column is `ellipsis` (`mergedTableLayout` in `rc-table/Table.js`). A numeric `scroll.x` on its own leaves it on `auto`, where the declared widths are advisory. The `tableScrollX` doc comment claimed the opposite, which is what misled every call site; it is corrected here. ## Changes - `tableLayout="fixed"` is passed explicitly at every `tableScrollX` call site, so the invariant no longer depends on a column incidentally being ellipsized. - The primary text column of each table uses `minWidth` instead of `width`. Under `fixed` the table still carries `min-width: 100%`, so surplus width is otherwise shared across all columns in proportion — inflating an expand arrow to 62px and a `Push` tag to 108px. With one unsized column the surplus lands there and every other column holds its declared width exactly, while `minWidth` stays the floor on narrow windows. `tableScrollX` now counts `minWidth` towards the total, otherwise the unsized column falls back to the 120px default and the computed minimum comes out too small. - Tables with several long-text fields share the surplus between two or three of them, and the flexible column is the field that benefits from the width — a certificate issuer DN, a DLQ topic, a message ID — rather than whichever column came first. Before/after at a 1482px container: | table | flexible column before | after | |---|---|---| | message query | Topic 465px | 281px (Topic / Key / Message ID) | | ACL rules | principal 462px | 351px (principal / resource) | | Topic | name 520px | 360px (name / remark) | | ACL risk | recommendation 742px | 407px (item / evidence / recommendation) | | K8s certs | cluster name 492px | issuer 412px | - Long-name columns get `ellipsis` plus a tooltip carrying the full value. Columns rendering two lines keep a fixed width — column-level `ellipsis` forces `nowrap` on the cell and would collapse them. - The consumer group table regains the modification-time column that an earlier width-trimming attempt had dropped; with the surplus handled properly the eleven columns fit without a horizontal scrollbar. - The delete action on the K8s certificate table was the only table action in the app styled as a link button; it now matches the outlined style used elsewhere. ## Verification - `getComputedStyle(table).tableLayout` is `fixed` on every list page. - Consumer group table with a 45-char group name: column 190px (was 432px), table 1154px (was 1371px), long name truncates with a tooltip. - `tsc --noEmit` clean, `eslint` no errors, `vitest run` 980 passing. `table.test.ts` gains cases for the `minWidth` accounting. - Deployed and measured in a browser at container widths 305 / 650 / 1053 / 1290 / 1482px. -- 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]
