fix(catalog): enable independent scrolling for filter panel (kubeflow#2475)

* fix(catalog): enable independent scrolling for filter panel

Makes the filter panel in Model Catalog scroll independently from the
content area, preventing users from losing their filtering context when
scrolling through models.

The filter panel now uses sticky positioning with its own scroll
container, matching the original design intent where filters remain
accessible while browsing model results.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Signed-off-by: Manaswini Das <dasmanaswini10@gmail.com>

* Use PatternFly variant="sticky" instead of custom positioning

Address review feedback to use PatternFly's native sticky variant
instead of custom CSS positioning, following PF best practices.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Signed-off-by: Manaswini Das <dasmanaswini10@gmail.com>

* Prevent scrollbar from consuming sidebar width

Add scrollbar-gutter: stable to reserve space for the scrollbar,
preventing layout shift and content cutoff when the scrollbar appears.
This maintains constant sidebar width regardless of scroll state.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Signed-off-by: Manaswini Das <dasmanaswini10@gmail.com>

* Add padding to prevent content cutoff by scrollbar

Adds padding-right to filter content to ensure borders and content
are not clipped by the scrollbar. This maintains proper spacing
between filter components and the scrollbar edge.

Removed scrollbar-gutter approach in favor of content padding,
which provides better visual consistency.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Signed-off-by: Manaswini Das <dasmanaswini10@gmail.com>

* Remove fixed minWidth from performance toggle card

The 280px minWidth was causing the card to overflow the sidebar width
when the scrollbar was present. Removing the constraint allows the card
to naturally fit within the sidebar and respect container width limits.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Signed-off-by: Manaswini Das <dasmanaswini10@gmail.com>

* Increase sidebar width to prevent text wrapping

Set SidebarPanel width to 300px to ensure the "Model performance view"
toggle text doesn't wrap, keeping the layout closer to the design while
maintaining a reasonable sidebar width.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Signed-off-by: Manaswini Das <dasmanaswini10@gmail.com>

* Fix TypeScript error: use inline style for sidebar width

PatternFly's width prop only accepts percentage values (width_25, width_33, etc.),
not pixel values. Using inline style to set a fixed 300px width instead.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Signed-off-by: Manaswini Das <dasmanaswini10@gmail.com>

* fix text wrapping issues for performance toggle

Signed-off-by: manaswinidas <dasmanaswini10@gmail.com>

---------

Signed-off-by: Manaswini Das <dasmanaswini10@gmail.com>
Signed-off-by: manaswinidas <dasmanaswini10@gmail.com>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: 2 people

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

@@ -42,7 +42,7 @@ const ModelCatalog: React.FC = () => {
         provideChildrenPadding
       >
         <Sidebar hasBorder hasGutter>
-          <SidebarPanel>
+          <SidebarPanel variant="sticky">
             <ModelCatalogFilters />
           </SidebarPanel>
           <SidebarContent>