Skip to content

Improve copy button usability on code blocks#56382

Merged
bbovenzi merged 1 commit into
apache:mainfrom
RoyLee1224:hover-clipboard
Oct 8, 2025
Merged

Improve copy button usability on code blocks#56382
bbovenzi merged 1 commit into
apache:mainfrom
RoyLee1224:hover-clipboard

Conversation

@RoyLee1224

@RoyLee1224 RoyLee1224 commented Oct 4, 2025

Copy link
Copy Markdown
Contributor

Related issue

part of #56250

Why

Previously, for long lines of code, the copy button was pushed off-screen, forcing users to scroll horizontally to access it.

What

Now, if you hover on the code block, the button is always visible on the right edge of the container, regardless of horizontal scroll position.

Screenshots

code_before.mp4
code_after.mp4

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label Oct 4, 2025
@RoyLee1224

Copy link
Copy Markdown
Contributor Author

@NilsJPWerner Let me know what you think!

@RoyLee1224 RoyLee1224 changed the title feat: make clipboard hover Improve copy button usability on code blocks Oct 4, 2025

@jscheffl jscheffl 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.

Supporting this. Horizontal scrolling is not desired. Thanks for the fix.

@jscheffl jscheffl added this to the Airflow 3.1.1 milestone Oct 4, 2025
@jscheffl jscheffl added the type:bug-fix Changelog: Bug Fixes label Oct 4, 2025

@hussein-awala hussein-awala 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.

+1 I like this change, but I can’t approve it since my TypeScript knowledge is limited.

@guan404ming guan404ming 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.

Looks great!
I wonder if there are another places having same issue. Maybe we could fix them as well.

@NilsJPWerner

Copy link
Copy Markdown
Contributor

@NilsJPWerner Let me know what you think!

This is fantastic!

@NilsJPWerner NilsJPWerner mentioned this pull request Oct 6, 2025
19 tasks

@bbovenzi bbovenzi 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.

lgtm!

although, I wonder why the wrapLongLines wasn't working

@bbovenzi bbovenzi merged commit 0dca308 into apache:main Oct 8, 2025
60 checks passed
github-actions Bot pushed a commit that referenced this pull request Oct 8, 2025
(cherry picked from commit 0dca308)

Co-authored-by: LI,JHE-CHEN <103923510+RoyLee1224@users.noreply.github.com>
@github-actions

github-actions Bot commented Oct 8, 2025

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-1-test

Status Branch Result
v3-1-test PR Link

github-actions Bot pushed a commit to aws-mwaa/upstream-to-airflow that referenced this pull request Oct 8, 2025
(cherry picked from commit 0dca308)

Co-authored-by: LI,JHE-CHEN <103923510+RoyLee1224@users.noreply.github.com>
jscheffl pushed a commit that referenced this pull request Oct 9, 2025
(cherry picked from commit 0dca308)

Co-authored-by: LI,JHE-CHEN <103923510+RoyLee1224@users.noreply.github.com>
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
dabla pushed a commit to dabla/airflow that referenced this pull request Oct 12, 2025
@RoyLee1224 RoyLee1224 deleted the hover-clipboard branch October 20, 2025 00:28
TyrellHaywood pushed a commit to TyrellHaywood/airflow that referenced this pull request Oct 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers. type:bug-fix Changelog: Bug Fixes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants