fix(catalog): enable independent scrolling for filter panel by manaswinidas · Pull Request #2475 · kubeflow/model-registry

manaswinidas · 2026-03-25T13:52:22Z

Description

Enables independent scrolling for the filter panel in Model Catalog, preventing users from losing their filtering context when scrolling through model results.

Previously, the filter panel and content area scrolled together, making it difficult for users to maintain context of their filtering selections while browsing models. The filter panel now uses sticky positioning with its own scroll container.

Changes:

Added sticky positioning to filter panel (SidebarPanel)
Set max-height: 100vh with overflow-y: auto
Filter panel now scrolls independently from content area

How Has This Been Tested?

Manual verification:

Navigate to Model Catalog
Reduce browser window height to trigger scrolling
Scroll through model results
Verify filter panel remains visible and scrolls independently
With many filters applied, verify filter panel scrolls separately
Test at various viewport sizes

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.

🤖 Generated with Claude Code

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>

manaswinidas · 2026-03-25T14:35:20Z

/retest

manaswinidas

/lgtm

But needs a second opinion - here's a screen recording that will help the upcoming reviewers decide

Screen.Recording.2026-03-25.at.8.28.55.PM.mov

google-oss-prow · 2026-03-25T15:06:16Z

@manaswinidas: you cannot LGTM your own PR.

Details

In response to this:

/lgtm

But needs a second opinion - here's a screen recording that will help the upcoming reviewers decide

Screen.Recording.2026-03-25.at.8.28.55.PM.mov

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

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

google-oss-prow · 2026-03-25T15:16:26Z

@Philip-Carneiro: changing LGTM is restricted to collaborators

Details

In response to this:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

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>

manaswinidas · 2026-03-25T15:19:31Z

Updated to use PatternFly's variant="sticky" prop instead of custom positioning. Thanks for the feedback!

Philip-Carneiro · 2026-03-25T15:37:03Z

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

      >
        <Sidebar hasBorder hasGutter>
-          <SidebarPanel>
+          <SidebarPanel variant="sticky" style={{ maxHeight: '100vh', overflowY: 'auto' }}>


note that scrollbar consumes some width from the actual sidebar, so a little of the border of the things inside are cut out as the image bellow:

google-oss-prow · 2026-03-25T15:37:15Z

@Philip-Carneiro: changing LGTM is restricted to collaborators

Details

In response to this:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

manaswinidas · 2026-03-25T16:49:28Z

Thanks for pointing this out! The scrollbar does consume some width, but I think the current width behavior is acceptable. The sidebar layout adjusts naturally and the content remains accessible. If this becomes a UX concern during testing, we can revisit with additional width adjustments, but for now the default behavior should work well.

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>

manaswinidas · 2026-03-25T16:56:27Z

You're absolutely right about the width issue! I've added scrollbar-gutter: 'stable' which reserves space for the scrollbar even when it's not visible. This prevents the layout shift and content cutoff you observed - the sidebar width now stays constant regardless of whether the scrollbar is showing or not. This is the best of both worlds: independent scrolling without layout shift. 👍

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>

manaswinidas · 2026-03-25T17:08:36Z

You're right - the previous approaches still had the scrollbar taking width. I've switched to a simpler solution: added paddingRight to the filter content itself. This ensures the filter components have proper spacing from the scrollbar edge, preventing any border cutoff, while keeping the implementation clean and simple. The scrollbar naturally takes its space, but content stays properly spaced. 👍

mturley

@manaswinidas I'm still seeing the edge of the sidebar get cut off. Interestingly, most of the contents have the correct width but it's just the perf view toggle box that is too wide. Here's a screenshot, and then another scrolled to the right:

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>

manaswinidas · 2026-03-26T11:28:30Z

Good catch! The issue was the ModelPerformanceViewToggleCard had a hardcoded minWidth: '280px' which was causing it to overflow when the scrollbar was present. I've removed this constraint so the card naturally fits within the sidebar width. The other filter components didn't have this issue because they didn't have a fixed minimum width. Should be resolved now! 👍

manaswinidas · 2026-03-26T11:47:02Z

Now it looks like this(human message):

Philip-Carneiro · 2026-03-30T15:11:27Z

/lgtm
/approve

google-oss-prow · 2026-03-30T15:11:31Z

@Philip-Carneiro: changing LGTM is restricted to collaborators

Details

In response to this:

/lgtm
/approve

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

google-oss-prow · 2026-03-30T15:12:34Z

@Philip-Carneiro: changing LGTM is restricted to collaborators

Details

In response to this:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

manaswinidas · 2026-03-30T15:15:31Z

/approve

google-oss-prow · 2026-03-30T15:15:41Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: manaswinidas, Philip-Carneiro

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~~ [manaswinidas]

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

manaswinidas · 2026-03-30T15:16:03Z

@mturley can you LGTM if this looks right ?

mturley · 2026-03-30T16:05:12Z

@manaswinidas I'm so sorry for the nitpick, but can we slightly increase the width of the sidebar so the model performance view toggle text still doesn't wrap? It would look closer to the design

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>

manaswinidas · 2026-03-31T10:37:58Z

No worries at all! I've increased the sidebar width to 300px using PatternFly's width prop. This gives the "Model performance view" toggle text enough room to display without wrapping while keeping the sidebar at a reasonable size. 👍

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>

manaswinidas · 2026-03-31T10:40:29Z

Fixed TypeScript error - PatternFly's width prop only accepts percentage values (width_25, width_33, etc.), so I've used inline style to set the fixed 300px width instead. Tests should pass now! ✅

mturley

@manaswinidas sorry to continue the nitpicking - it seems like the 300px width doesn't have any effect, and even if I edit the style in my browser to be wider it's not changing the width. The toggle card still is narrow enough that its text wraps and doesn't look like it used to. Testing in mock mode PF theme:

Screenshot from your branch:

Screenshot from main, wider with the icon and text all inline with the toggle:

This might require some tinkering by hand, AI isn't great at CSS stuff. Happy to take a closer look if you want a hand troubleshooting.

google-oss-prow bot requested review from chambridge and fege March 25, 2026 13:52

github-actions bot added the Area/UI label Mar 25, 2026

google-oss-prow bot added the size/XS label Mar 25, 2026

manaswinidas commented Mar 25, 2026

View reviewed changes

Philip-Carneiro suggested changes Mar 25, 2026

View reviewed changes

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

Philip-Carneiro suggested changes Mar 25, 2026

View reviewed changes

Philip-Carneiro mentioned this pull request Mar 25, 2026

Fix registry description overflow in settings table #2476

Closed

5 tasks

mturley suggested changes Mar 25, 2026

View reviewed changes

google-oss-prow bot assigned mturley Mar 25, 2026

manaswinidas requested review from Philip-Carneiro and mturley March 26, 2026 14:12

Philip-Carneiro approved these changes Mar 30, 2026

View reviewed changes

google-oss-prow bot added the approved label Mar 30, 2026

google-oss-prow bot added size/S and removed size/XS labels Mar 31, 2026

google-oss-prow bot added size/XS and removed size/S labels Mar 31, 2026

mturley suggested changes Apr 3, 2026

View reviewed changes

Conversation

manaswinidas commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Merge criteria:

Uh oh!

manaswinidas commented Mar 25, 2026

Uh oh!

manaswinidas left a comment

Choose a reason for hiding this comment

Uh oh!

google-oss-prow bot commented Mar 25, 2026

Uh oh!

Uh oh!

google-oss-prow bot commented Mar 25, 2026

Uh oh!

manaswinidas commented Mar 25, 2026

Uh oh!

Philip-Carneiro Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

google-oss-prow bot commented Mar 25, 2026

Uh oh!

manaswinidas commented Mar 25, 2026

Uh oh!

manaswinidas commented Mar 25, 2026

Uh oh!

manaswinidas commented Mar 25, 2026

Uh oh!

mturley left a comment

Choose a reason for hiding this comment

Uh oh!

manaswinidas commented Mar 26, 2026

Uh oh!

manaswinidas commented Mar 26, 2026

Uh oh!

Philip-Carneiro commented Mar 30, 2026

Uh oh!

google-oss-prow bot commented Mar 30, 2026

Uh oh!

google-oss-prow bot commented Mar 30, 2026

Uh oh!

manaswinidas commented Mar 30, 2026

Uh oh!

google-oss-prow bot commented Mar 30, 2026

Uh oh!

manaswinidas commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mturley commented Mar 30, 2026

Uh oh!

manaswinidas commented Mar 31, 2026

Uh oh!

manaswinidas commented Mar 31, 2026

Uh oh!

mturley left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

manaswinidas commented Mar 25, 2026 •

edited

Loading

manaswinidas commented Mar 30, 2026 •

edited

Loading