Skip to content

fix(ui): anchor schema diff migration copy button outside scroll area - #1082

Merged
cevheri merged 1 commit into
libredb:mainfrom
Aditya-XR:fix/schema-diff-copy-button-anchor
Sep 22, 2026
Merged

cevheri merged 1 commit into
libredb:mainfrom
Aditya-XR:fix/schema-diff-copy-button-anchor

Conversation

@Aditya-XR

Copy link
Copy Markdown
Contributor

Description

In src/components/SchemaDiff.tsx, the SQL Migration view previously placed its migration SQL <pre> block without an anchored copy button within the scrollable container. When scrolling through long migrations, any control placed in normal document flow scrolls out of view.

This PR addresses #1080 by:

  1. Importing and integrating CopyButton from @/components/copy-button into the SQL Migration view with testId="schema-diff-migration-copy".
  2. Following the pattern from CodeGenerator.tsx:346: wrapping the <pre> in a div.relative, constraining <pre> with max-h-[50vh] and overflow-auto, and pinning the CopyButton with absolute top-3 right-3. This guarantees that the button stays anchored in view regardless of how far down a long migration script the user scrolls.
  3. Adding unit and structural assertion tests in tests/components/SchemaDiff.test.tsx verifying:
    • The button renders with testId="schema-diff-migration-copy" and copies migration SQL to the clipboard.
    • The button does not sit inside the scrollable <pre> element.
    • The button is pinned via absolute over the relative container wrapping the scrollable <pre>.

Closes #1080

Testing

  • Verified component tests: bun tests/run-tests.ts tests/components/SchemaDiff.test.tsx (138/138 pass).
  • Verified TypeScript compilation: bun run typecheck (tsc --noEmit - 0 errors).
  • Verified linter: bun run lint:oxc (oxlint - 0 errors).

Copilot AI balanced review requested due to automatic review settings September 22, 2026 20:24

Copilot AI 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.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@cevheri cevheri added the enhancement New feature or request label Sep 22, 2026
@codecov

codecov Bot commented Sep 22, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@cevheri cevheri left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

CI errors

@cevheri cevheri left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Thanks @Aditya-XR, and welcome to LibreDB Studio! The red Functional Smoke check was a flaky E2E test on our side, not your change; a rerun on the same commit is green. The fix follows the CodeGenerator pattern and the structural test covers what #1080 asked for.
Merging now.

@cevheri
cevheri merged commit 43fde4a into libredb:main Sep 22, 2026
35 of 36 checks passed
@Aditya-XR
Aditya-XR deleted the fix/schema-diff-copy-button-anchor branch September 23, 2026 03:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Schema Diff's migration copy button scrolls away with a long migration

3 participants