Fix search bar for Model and MCP Catalog (kubeflow#2567)

* add fix for the searchbar

Made-with: Cursor
Signed-off-by: Philip Colares Carneiro <philip.colares@gmail.com>

* fix the mcp catalog search placeholder

Signed-off-by: Philip Colares Carneiro <philip.colares@gmail.com>

---------

Signed-off-by: Philip Colares Carneiro <philip.colares@gmail.com>

Author: Philip-Carneiro

clients/ui/frontend/src/app/pages/mcpCatalog/screens/McpCatalogSourceLabelSelector.tsx

@@ -83,17 +83,21 @@ const McpCatalogSourceLabelSelector: React.FC<McpCatalogSourceLabelSelectorProps
           {...(toolbarClearAllProps ?? {})}
         >
           <ToolbarContent rowWrap={{ default: 'wrap' }}>
-            <Flex>
-              <ToolbarToggleGroup breakpoint="md" toggleIcon={<FilterIcon />}>
-                <ToolbarGroup variant="filter-group" gap={{ default: 'gapMd' }} alignItems="center">
-                  <ToolbarItem>
+            <Flex style={{ flex: 1 }}>
+              <ToolbarToggleGroup style={{ flex: 1 }} breakpoint="md" toggleIcon={<FilterIcon />}>
+                <ToolbarGroup
+                  style={{ flex: 1 }}
+                  variant="filter-group"
+                  gap={{ default: 'gapMd' }}
+                  alignItems="center"
+                >
+                  <ToolbarItem style={{ flex: 1 }}>
                     <ThemeAwareSearchInput
                       data-testid="mcp-catalog-search-input"
                       aria-label="Search with submit button"
                       className="toolbar-fieldset-wrapper"
-                      placeholder="Search MCP servers..."
+                      placeholder="Search by name, keyword, or description"
                       value={inputValue}
-                      style={{ width: '100%', maxWidth: '600px' }}
                       onChange={handleSearchInputChange}
                       onSearch={handleSearchInputSearch}
                       onClear={handleClear}

clients/ui/frontend/src/app/pages/modelCatalog/screens/ModelCatalogSourceLabelSelector.tsx

@@ -131,19 +131,22 @@ const ModelCatalogSourceLabelSelector: React.FC<ModelCatalogSourceLabelSelectorP
             : {})}
         >
           <ToolbarContent rowWrap={{ default: 'wrap' }}>
-            <Flex>
-              <ToolbarToggleGroup breakpoint="md" toggleIcon={<FilterIcon />}>
-                <ToolbarGroup variant="filter-group" gap={{ default: 'gapMd' }} alignItems="center">
-                  <ToolbarItem>
+            <Flex style={{ flex: 1 }}>
+              <ToolbarToggleGroup style={{ flex: 1 }} breakpoint="md" toggleIcon={<FilterIcon />}>
+                <ToolbarGroup
+                  variant="filter-group"
+                  style={{ flex: 1 }}
+                  gap={{ default: 'gapMd' }}
+                  alignItems="center"
+                  className="toolbar-fieldset-wrapper"
+                >
+                  <ToolbarItem style={{ flex: 1 }}>
                     <ThemeAwareSearchInput
                       data-testid="search-input"
                       aria-label="Search with submit button"
                       className="toolbar-fieldset-wrapper"
                       placeholder="Filter by name, description and provider"
                       value={inputValue}
-                      style={{
-                        minWidth: '600px',
-                      }}
                       onChange={handleSearchInputChange}
                       onSearch={handleSearchInputSearch}
                       onClear={handleClear}

clients/ui/frontend/src/app/pages/modelRegistry/screens/components/FormFieldset.scss

@@ -0,0 +1,9 @@
+.toolbar-fieldset-wrapper {
+  flex: 1 1 0;
+  min-width: 0;
+
+  > .pf-v6-c-input-group__item:not(.pf-m-search-action) {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}

clients/ui/frontend/src/app/pages/modelRegistry/screens/components/FormFieldset.tsx

@@ -1,5 +1,6 @@
 import { useThemeContext } from 'mod-arch-kubeflow';
 import React, { CSSProperties, ReactNode } from 'react';
+import './FormFieldset.scss';
 
 interface FormFieldsetProps {
   component: ReactNode;

clients/ui/frontend/src/app/pages/modelRegistry/screens/components/ThemeAwareSearchInput.tsx

@@ -41,6 +41,7 @@ const ThemeAwareSearchInput: React.FC<ThemeAwareSearchInputProps> = ({
             data-testid={dataTestId}
             style={{
               ...style,
+              width: '100%',
               paddingBlockStart: 'var(--pf-t--global--spacer--control--vertical--default)',
               paddingBlockEnd: 'var(--pf-t--global--spacer--control--vertical--default)',
             }}