Repository navigation
fix: property dropdowns show the whole property name (up to 80 characters) - #1504
Merged
Merged
Conversation
Adds y/property-dropdown-width.spec.ts. It creates a property with an 80-character name and checks that the Compliance property filter and the task list property filter are wider than the old 190px and at least as wide as the name, and that neither the open list nor the picked value cuts the name off. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The property filter on the Compliance page was pinned to 190px and the open list of an mtx-select is exactly as wide as its field, so long property names were cut off with an ellipsis. Other property filters had the same problem at their fixed widths. Add PropertySelectWidthDirective, which sizes the mat-form-field of a property mtx-select to its longest property name, capped at 80 characters, with inline style so it outranks the fixed filter widths and the theme cap. It does not shrink in flex rows (they wrap) and takes its own row in the grid filter layouts. Apply it to every property filter of the plugin, and widen the calendar header property pill and menu to the same 80 characters. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
🟡 Changes recommended
The ch-based width caps can still truncate property names of up to 80 wide characters in the select, calendar pill, and menu, requiring widths derived from rendered label measurements.
2 open issues
What changed in this PR
This PR addresses truncated property names across the plugin’s filter dropdowns, targeting names up to 80 characters while leaving dialog and form selects unchanged.
Changes:
- Adds a shared sizing directive and applies it to 15 property filters.
- Increases width limits for the calendar’s property pill and menu.
- Adds Playwright regression checks for Compliance and task-list dropdown widths and text clipping.
Source paths below are relative to eform-client/src/app/plugins/modules/backend-configuration-pn/; the Playwright path is repository-relative.
| File | Description |
|---|---|
modules/task-wizard/components/task-wizard-filters/task-wizard-filters.component.ts |
Imports the sizing directive. |
modules/task-wizard/components/task-wizard-filters/task-wizard-filters.component.html |
Applies property-based sizing. |
modules/task-tracker/components/task-tracker-filters/task-tracker-filters.component.ts |
Imports the sizing directive. |
modules/task-tracker/components/task-tracker-filters/task-tracker-filters.component.html |
Applies property-based sizing. |
modules/task-management/components/task-management-filters/task-management-filters.component.ts |
Imports the sizing directive. |
modules/task-management/components/task-management-filters/task-management-filters.component.html |
Applies property-based sizing. |
modules/task-list/components/task-list-filters/task-list-filters.component.ts |
Imports the sizing directive. |
modules/task-list/components/task-list-filters/task-list-filters.component.html |
Applies sizing to the grid-based property filter. |
modules/tail-bite/components/tail-bite-shell/tail-bite-shell.component.ts |
Imports the sizing directive. |
modules/tail-bite/components/tail-bite-shell/tail-bite-shell.component.html |
Sizes the header property picker. |
modules/statistics/components/statistics-container/statistics-container.component.ts |
Imports the sizing directive. |
modules/statistics/components/statistics-container/statistics-container.component.html |
Applies property-based sizing. |
modules/property-workers/components/property-workers-page/property-workers-page.component.ts |
Imports the sizing directive. |
modules/property-workers/components/property-workers-page/property-workers-page.component.html |
Sizes the location filter using available properties. |
modules/property-workers/components/property-worker-filters/property-worker-filters.component.ts |
Imports the sizing directive. |
modules/property-workers/components/property-worker-filters/property-worker-filters.component.html |
Applies sizing to the location filter. |
modules/files/components/files-filters/files-filters.component.ts |
Imports the sizing directive. |
modules/files/components/files-filters/files-filters.component.html |
Applies property-based sizing. |
modules/documents/components/documents-filters/documents-filters.component.ts |
Imports the sizing directive. |
modules/documents/components/documents-filters/documents-filters.component.html |
Applies property-based sizing. |
modules/compliance-report/components/compliance-report-filters/compliance-report-filters.component.ts |
Imports the sizing directive. |
modules/compliance-report/components/compliance-report-filters/compliance-report-filters.component.scss |
Documents the property field’s width override; no functional style change. |
modules/compliance-report/components/compliance-report-filters/compliance-report-filters.component.html |
Applies sizing to the Compliance property filter. |
modules/chemicals/components/chemicals-container/chemicals-container.component.ts |
Imports the sizing directive. |
modules/chemicals/components/chemicals-container/chemicals-container.component.html |
Sizes the chemicals property picker. |
modules/calendar/components/calendar-header/calendar-header.component.scss |
Expands property pill/menu caps and prevents menu-item wrapping. |
modules/calendar-task-list/components/calendar-task-list-filters/calendar-task-list-filters.component.ts |
Imports the sizing directive. |
modules/calendar-task-list/components/calendar-task-list-filters/calendar-task-list-filters.component.html |
Applies sizing to the grid-based property filter. |
modules/adhoc/components/adhoc-history/adhoc-history.component.ts |
Imports the sizing directive. |
modules/adhoc/components/adhoc-history/adhoc-history.component.html |
Sizes the history property filter. |
modules/adhoc/components/adhoc-filters/adhoc-filters.component.ts |
Imports the sizing directive. |
modules/adhoc/components/adhoc-filters/adhoc-filters.component.html |
Sizes the ad hoc property filter. |
directives/property-select-width.directive.ts |
Adds shared character-based width calculation and layout bindings. |
directives/index.ts |
Exports the directive. |
eform-client/playwright/e2e/plugins/backend-configuration-pn/y/property-dropdown-width.spec.ts |
Seeds an 80-character name and checks dropdown sizing and clipping. |
Review effort: Balanced
The directive sized a property field by character count in ch units, the width of a zero, so a name with wide letters (W, M) could still be cut off. It now measures the first 80 characters of each name on a canvas in the field's computed font and letter spacing, and adds room for padding and icons. It re-measures when the list changes and once web fonts have loaded. The calendar header property pill and menu drop their 80ch caps for the same reason; the header row wraps, so only the viewport limits them. The regression test now uses a name made almost entirely of W and M, so a field sized by character count would fail it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The host app appends ng-select panels to the body, not inside the select, so looking for the panel under the select's id never found it. Locate the open list page-wide like the other specs do, asserting that exactly one is open, and check that it is gone after Escape. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bug
The property filter on the Compliance page was pinned to 190px (
compliance-report-filters.component.scss). An mtx-select's open list is exactly as wide as its field, so long property names (name plus CHR number) were cut off with an ellipsis, both in the list and in the field once picked. The other property filters in the plugin have the same problem at their fixed widths (180–200px, or a quarter of the task-list filter grid).The requested behaviour is that the field itself and the list both grow to show the whole name, capped at 80 characters, in every property dropdown of the plugin.
Regression test
eform-client/playwright/e2e/plugins/backend-configuration-pn/y/property-dropdown-width.spec.ts(shardy):#complianceFilterPropertymust be wider than 190px and at least as wide as the name. The open list must be wider than 190px. The option must not be truncated (scrollWidth <= clientWidth), and neither must the picked value in the field.#taskListPropertyFilter, except the picked value: this is a multi-select, so it shows as a chip and is not checked.y.Without the fix, PW1 fails because the Compliance field is exactly 190px. PW2 fails because the option is clipped in its grid column.
Fix
PropertySelectWidthDirective(backend-configuration-pn/directives). It goes on themat-form-fieldof a property mtx-select and sizes it to the longest property name, capped at 80 characters (1.1chper character plus room for padding and icons, at least 200px).flex: 0 0 autokeeps flex rows from shrinking the field; those rows already useflex-wrap, so they wrap instead.grid-column: 1 / -1gives the field its own row in the grid filter layouts (task list, calendar task list).Testing
I did not compile the Angular code locally: the plugin is built inside the eform-angular-frontend host, which this environment cannot fetch. The CI Docker image build compiles it. In CI, the
yshard should runproperty-dropdown-width.spec.tsgreen; it would fail without the fix. The other shards and the frontend unit tests should stay green; the unit specs that override these components' imports useNO_ERRORS_SCHEMA.Kanban card #5550
🤖 Generated with Claude Code