Skip to content

fix(ui): align short filters and hide inactive scrollbars - #2881

Merged
openai0229 merged 1 commit into
mainfrom
fix/filter-scrollbar-alignment
Sep 7, 2026
Merged

openai0229 merged 1 commit into
mainfrom
fix/filter-scrollbar-alignment

Conversation

@openai0229

Copy link
Copy Markdown
Contributor

Related issue

N/A - maintainer-requested and accepted follow-up to #2878.

Summary

Short database lists could shift to the right after opening the filter popover because their measured scroll width was smaller than the viewport. Clamp the measured width to the container width and observe layout changes so a popover initially mounted without visible dimensions also aligns correctly.

Fade horizontal and vertical scrollbar thumbs out within 120 ms when the pointer leaves the list. Keep the dragged thumb visible outside the list, restore it on pointer entry, and prevent hidden scrollbars from intercepting content clicks.

Affected surfaces

  • Frontend / Web
  • Backend / API / Storage
  • Database plugin / Driver
  • JCEF / Desktop packaging
  • CI / Build / Release
  • Documentation only

Verification

  • Commands and results: yarn lint, yarn run build:web:community --app_version=5.3.6-beta.5, and git diff --check passed. In the isolated PR worktree, yarn install --frozen-lockfile --offline --non-interactive, yarn lint, and git diff --check also passed.
  • Manual verification: Playwright CLI against the full Community Web build and an isolated backend connected to local SQL Server and MySQL. Passed short-list first opening, horizontal wheel over short lists, filtering, empty-search recovery, selection, select all, clearing, reopening, long-list scrolling with a fixed header, long-to-short filtering, Shift+wheel, and a narrow viewport. Scrollbars were fully hidden within the 180 ms observation window, did not intercept underlying content, remained visible while dragging outside for 3.3 seconds, and hid after release. Horizontal and vertical scrolling passed; no browser page errors. The maintainer accepted the resulting desktop behavior.
  • UI evidence: The original short-list reproduction had a 174 px left margin. Actual Web measurements after the fix showed zero left margin and checkbox alignment with the header. Screenshots were inspected and temporary test processes, data profiles, and screenshots were removed.

Risk and compatibility

  • Public API or stored data: N/A - no API or persistence changes.
  • Database or driver compatibility: Shared filter presentation only; no database-specific branches.
  • Network, privacy, or security: N/A - no new network destinations or credential handling.
  • Community / Local / Pro boundary: N/A - no runtime boundary changes.
  • Backward compatibility: Uses the existing ResizeObserver API and rc-virtual-list scrollbar class names. Long lists retain virtualization and horizontal scrolling. The shared component also serves result-column filters.

Reviewer map

  • Start here: chat2db-community-client/src/components/NodeFiltering/index.tsx for the viewport width floor and observer lifecycle; style.tsx for scrollbar visibility and pointer handling.
  • Failure condition: Open a list of short names, filter a long list to one short name, or drag a scrollbar outside the popover. Rows must remain aligned, hidden scrollbars must not block clicks, and the dragged thumb must remain visible until release.
  • Rollback or disable path: Revert this PR. No migration or configuration change is required.

Contributor declaration

  • I linked the Issue that defines this change.
  • I tested the affected behavior and reported the actual results above.
  • I did not include credentials, private data, or generated build output.
  • I disclosed substantial AI assistance below, or this PR contains no substantial AI-generated code.

AI assistance: Codex implemented the change and performed code review, automated checks, and Playwright CLI verification under maintainer direction.

@openai0229
openai0229 requested a review from a team as a code owner September 7, 2026 07:04
@openai0229 openai0229 moved this to In Review in Chat2DB Community Sep 7, 2026
@openai0229
openai0229 merged commit 4c6321b into main Sep 7, 2026
14 of 18 checks passed
@openai0229
openai0229 deleted the fix/filter-scrollbar-alignment branch September 7, 2026 07:13
@openai0229 openai0229 moved this from In Review to Done in Chat2DB Community Sep 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

1 participant