Fix search bar for Model and MCP Catalog

[Philip-Carneiro]

Description

The search bar in the Model Catalog and MCP Catalog pages was not stretching to fill the available toolbar width. This caused the placeholder text and search input to be cut off, making it difficult for users to see what they were typing or reading.

Root cause: The FormFieldset component (used for MUI theme rendering) was replacing its base CSS class instead of concatenating it

• Updated ModelCatalogSourceLabelSelector and McpCatalogSourceLabelSelector toolbar layout to use flex: 1 at each nesting level (Flex → ToolbarToggleGroup → ToolbarGroup → ToolbarItem), allowing the search bar to stretch to fill the available space
• Removed hardcoded minWidth/maxWidth constraints that conflicted with the flex layout

Non-PF mode:

PF mode:

How Has This Been Tested?

It was manually tested, no unit or cypress test are added since it was just style rendering issue

Merge criteria:

• All the commits have been signed-off (To pass the DCO check)

• The commits have meaningful messages
• Automated tests are provided as part of the PR for major new functionalities; testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has manually tested the changes and verified that the changes work.
• Code changes follow the kubeflow contribution guidelines.
• For first time contributors: Please reach out to the Reviewers to ensure all tests are being run, ensuring the label ok-to-test has been added to the PR.

If you have UI changes

• The developer has added tests or explained why testing cannot be added.
• Included any necessary screenshots or gifs if it was a UI change.
• Verify that UI/UX changes conform the UX guidelines for Kubeflow.

[manaswinidas]

Please add screenshots in the PR description

[Philip-Carneiro]

Please add screenshots in the PR description

Sorry, the PR was only to see if is possible for the solution work after synched, and it's working fine

[ppadti]

I tested this midstream - I see this:

bit different in terms of length than what we are seeing upstream with patternfly theme - Is that expected?

[Philip-Carneiro]

I tested this midstream - I see this:

bit different in terms of length than what we are seeing upstream with patternfly theme - Is that expected?

This is because how this is rendered by the midstream, but now we removed the forced styles and changes from midstream and show the entire placeholder. If a new content come at the right side or left side it will work normal because the flex change

[ppadti]

Thanks @Philip-Carneiro
/lgtm

[mturley]

/approve
/lgtm
Thank you @Philip-Carneiro

[google-oss-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: mturley

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• clients/ui/OWNERS [mturley]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[mturley]

@Philip-Carneiro I realize after approving this - it's fine for now, but the CSS here affects anything with .toolbar-fieldset-wrapper which is also present in MR, so we should make double check it's having the intended effect there and if there's a problem we need to scope it to catalog. From a quick check it seems fine