Skip to content

Fix: filter input styling#19460

Merged
nielslyngsoe merged 1 commit intorelease/16.0from
v16/hotfix/filter-input-styling
Jun 2, 2025
Merged

Fix: filter input styling#19460
nielslyngsoe merged 1 commit intorelease/16.0from
v16/hotfix/filter-input-styling

Conversation

@nielslyngsoe
Copy link
Copy Markdown
Member

@nielslyngsoe nielslyngsoe commented Jun 2, 2025

Fixes the styling of the uui-input in various locations, mainly when used as a filtering input on collections and extensions insights:
image

Copilot AI review requested due to automatic review settings June 2, 2025 11:15
@nielslyngsoe nielslyngsoe requested a review from iOvergaard June 2, 2025 11:15
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR addresses styling inconsistencies for the uui-input component when used as a filter input across multiple parts of the UI. The changes replace the previous "display: block;" style with "width: 100%;" to ensure the input stretches to the full width of its container.

  • Updated user group collection element styling
  • Updated create blueprint modal styling
  • Updated collection filter field styling

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/user-group-collection.element.ts Replaces display property with width styling for uui-input
src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create-blueprint/modal/create-blueprint-modal.element.ts Replaces display property with width styling for uui-input
src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-filter-field.element.ts Replaces display property with width styling for uui-input
Comments suppressed due to low confidence (3)

src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/user-group-collection.element.ts:42

  • Replacing 'display: block' with 'width: 100%' may change the rendering behavior if the default display value of uui-input is not already block-level. Consider verifying that uui-input supports width styling without explicitly setting its display type.
width: 100%;

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create-blueprint/modal/create-blueprint-modal.element.ts:82

  • Replacing 'display: block' with 'width: 100%' may affect the layout if uui-input relies on being a block element for proper rendering. Please confirm that the new style meets the intended UI requirements.
width: 100%;

src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-filter-field.element.ts:37

  • Changing from 'display: block' to 'width: 100%' may lead to unexpected layout behavior if uui-input does not automatically render as a block-level element. It might be useful to double-check if an explicit display value is needed alongside width.
width: 100%;

@nielslyngsoe nielslyngsoe enabled auto-merge (squash) June 2, 2025 11:17
@iOvergaard iOvergaard changed the title Fit: filter input styling Fix: filter input styling Jun 2, 2025
@nielslyngsoe nielslyngsoe merged commit 66da4a7 into release/16.0 Jun 2, 2025
24 checks passed
@nielslyngsoe nielslyngsoe deleted the v16/hotfix/filter-input-styling branch June 2, 2025 11:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants