Skip to content

fix: improve filter dropdown list height#8176

Open
Qimin5 wants to merge 5 commits into
graphql-hive:mainfrom
Qimin5:fix-issue-3816
Open

fix: improve filter dropdown list height#8176
Qimin5 wants to merge 5 commits into
graphql-hive:mainfrom
Qimin5:fix-issue-3816

Conversation

@Qimin5

@Qimin5 Qimin5 commented Jun 27, 2026

Copy link
Copy Markdown

Background

This PR attempts to address issue #3816, where the operation filter dropdown on the Insights page is cut off when many operations are displayed.

Description

I investigated the Insights filter components and traced the operation filter to the shared FilterContent component.

Changes made:

  • Increased the maximum dropdown list height from 256px to 384px.
  • Added a responsive maxHeight based on the viewport so larger operation lists have more available space.
  • Kept the existing scrolling behavior.

Modified file:

  • packages/web/app/src/components/base/floating/filter-dropdown/filter-content.tsx

Testing

  • Built the project successfully using pnpm build.
  • Started Hive locally.
  • Verified the application still loads correctly.
  • Reviewed the dropdown behavior locally.

Related Issue

Fixes #3816

Notes

My local environment did not contain enough operation data to reproduce the exact long dropdown shown in the GitHub issue, so this fix is based on the reported behavior and code investigation.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

This pull request increases the maximum height of the filter dropdown list and introduces viewport-aware height constraints to prevent the list from being cut off. The feedback recommends referencing the MAX_LIST_HEIGHT constant instead of hardcoding 384px to maintain a single source of truth, and retaining overflow: 'auto' to handle potential horizontal overflow safely.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment on lines +139 to +140
maxHeight: 'min(384px, calc(100vh - 220px))',
overflowY: 'auto',

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

Avoid duplicating the hardcoded maximum height value (384px). Instead, reference the existing MAX_LIST_HEIGHT constant to keep the configuration single-sourced. Additionally, keeping overflow: 'auto' is preferred over overflowY: 'auto' to safely handle any potential horizontal overflow.

Suggested change
maxHeight: 'min(384px, calc(100vh - 220px))',
overflowY: 'auto',
maxHeight: 'min(' + MAX_LIST_HEIGHT + 'px, calc(100vh - 220px))',
overflow: 'auto',

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

operation filter list on insights page is cut off at the bottom

1 participant