Skip to content

fix(ai): contain long SQL preview overflow - #1960

Closed
openai0229 wants to merge 3 commits into
mainfrom
fix/1905-sql-preview-overflow
Closed

openai0229 wants to merge 3 commits into
mainfrom
fix/1905-sql-preview-overflow

Conversation

@openai0229

@openai0229 openai0229 commented Jul 23, 2026 •

Copy link
Copy Markdown
Contributor

Related issue

Closes #1905

Summary

The earlier Markdown and SQLPreview containment fixes were necessary but did not explain the packaged JCEF symptom where the entire conversation shifted horizontally. Exact sql fences still require the local SQLPreview override because @chat2db/ui 1.45.3 ignores wrap and preserves intrinsic-width highlighted code.

The remaining cross-boundary path was AI bottom-follow: a sentinel called scrollIntoView(). That API considers the inline axis and every scrollable ancestor, while overflow: hidden containers remain programmatically scrollable. A long SQL response could therefore leave the SQL preview correctly contained yet still move the message list or an outer hidden scroller horizontally.

This revision removes the sentinel and centralizes bottom-follow, message anchoring, and alignment correction on the message-list element through scrollTo({ top, left: 0 }). Existing horizontal offset is reset before smooth vertical movement, unexpected manual offsets are normalized, and the AI root uses overflow: clip with overflow: hidden as the compatibility fallback. The SQLPreview containment and local highlighter override remain in place because they solve the separate intrinsic-width leak.

Affected surfaces

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

Verification

  • Commands and results:
    • yarn test:ai-message-scroll - passed; forbids AI-page scrollIntoView, direct message-container scrollTo and direct scrollTop writes, and locks all three automatic paths to the vertical helper.
    • yarn test:ai-markdown-code - passed.
    • yarn test:sql-preview-layout - passed.
    • Targeted ESLint for the AI and SQLPreview changed/test files with --max-warnings=0 - passed.
    • CI workflow YAML parse - passed.
    • git diff --check - passed.
    • yarn build:web:community --app_version=5.3.1 - passed twice, with a final rebuild after the independent review adjustment; Webpack compiled successfully.
    • Knowledge lint - passed.
  • Artifact verification:
    • The final bundle contains Community version 5.3.1, ai-markdown-sql-code-block, and the overflow: clip guard.
    • Replacement dist.zip uses the release-script-compatible single dist/ root and passes unzip -t.
    • Replacement dist.zip SHA-256: e1620a41cbb26bab55231072bc07dec78c0cb3b311a631202f19912adb1d6383.
  • UI evidence: Packaged JCEF retests showed that the first SQLPreview-only revision and the second CSS message-list-boundary revision were incomplete. The replacement artifact containing the axis-scoped auto-scroll fix is pending packaged JCEF runtime retest.

Risk and compatibility

  • Public API or stored data: N/A; no API or persistence changes.
  • Database or driver compatibility: N/A; rendering-only change.
  • Network, privacy, or security: N/A; no network or data-flow changes.
  • Community / Local / Pro boundary: Community frontend only.
  • Backward compatibility: Existing SQLPreview callers keep the same props and defaults. AI smooth vertical positioning is preserved, but horizontal offset is now always zeroed before it begins.

Reviewer map

  • Start here: chat2db-community-client/src/blocks/AI/messageListScroll.ts, then the three call sites in src/blocks/AI/index.tsx. Review src/components/SQLPreview/style.ts separately for the intrinsic-width containment layer.
  • Failure condition: AI automatic following moves any scrollable ancestor horizontally; any of the three message viewport paths bypasses the helper; or a long SQL line widens the assistant/page instead of scrolling inside SQLPreview.
  • Rollback or disable path: Revert the three commits in this PR; no migration or cleanup 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 performed the multi-frame root-cause analysis, traced the SQL/highlighter and message-scroll paths, implemented the scoped SQL containment and axis-scoped scrolling changes, added the regression contracts, and ran the reported checks. The maintainer supplied and reviewed the packaged desktop failures.

@openai0229

Copy link
Copy Markdown
Contributor Author

Stopping this fix at maintainer request. The unmerged SQLPreview and message-scroll changes are being discarded, and the earlier merged PR #1907 will be reverted separately.

@openai0229 openai0229 closed this Jul 23, 2026
@openai0229
openai0229 deleted the fix/1905-sql-preview-overflow branch July 23, 2026 09:18
@openai0229 openai0229 moved this from In Review to Done in Chat2DB Community Jul 23, 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.

Long SQL code blocks break the AI chat page layout

1 participant