Skip to content

[lexical-playground] Bug Fix: Table add-row button no longer hides horizontal scroll#7847

Merged
etrepum merged 10 commits intofacebook:mainfrom
niikkhilsharma:table-horizontal-scroll
Sep 25, 2025
Merged

[lexical-playground] Bug Fix: Table add-row button no longer hides horizontal scroll#7847
etrepum merged 10 commits intofacebook:mainfrom
niikkhilsharma:table-horizontal-scroll

Conversation

@niikkhilsharma
Copy link
Copy Markdown
Contributor

@niikkhilsharma niikkhilsharma commented Sep 22, 2025

Current Behavior:
The table add-row button appears on hover and covers the horizontal scrollbar when tables have many columns, making it impossible to scroll horizontally using the mouse. This creates a poor user experience when working with wide tables that require horizontal scrolling.
Changes in this PR:

  • Added more position from the top in order to show the + (icon) after the horizontal scrollbar.
    Closes #7751
    Test plan
    Before
  • Table with many columns shows horizontal scrollbar
  • On hover near bottom of table, add-row button appears
  • Button covers the horizontal scrollbar completely
  • Users cannot scroll horizontally using mouse when button is visible
  • Must move mouse away from table bottom to access scrollbar

After

  • Table with many columns shows horizontal scrollbar
  • Horizontal scrollbar remains fully accessible for mouse interaction
  • Users can scroll horizontally while add-row button is visible
  • Button returns to normal position when no scroll overlap occurs
  • All existing table functionality (adding rows, hover states) works correctly
    The solution looks like this :
492143926-a7164bb1-734a-4dbc-85d1-2c59e984c952

@vercel
Copy link
Copy Markdown

vercel bot commented Sep 22, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
lexical Ready Ready Preview Comment Sep 25, 2025 6:29pm
lexical-playground Ready Ready Preview Comment Sep 25, 2025 6:29pm

@meta-cla
Copy link
Copy Markdown

meta-cla bot commented Sep 22, 2025

Hi @niikkhilsharma!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

@niikkhilsharma
Copy link
Copy Markdown
Contributor Author

closing this request due to CLA issues, I'll reopen it again.

@niikkhilsharma
Copy link
Copy Markdown
Contributor Author

Re-opening the pull request after signing the Meta CLA

@meta-cla
Copy link
Copy Markdown

meta-cla bot commented Sep 22, 2025

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 22, 2025
@etrepum etrepum changed the title fixed: Table add-row button hides horizontal scroll [lexical-playground] Bug Fix: Table add-row button no longer hides horizontal scroll Sep 22, 2025
@etrepum etrepum added the extended-tests Run extended e2e tests on a PR label Sep 22, 2025
@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Sep 23, 2025

That screenshot doesn't reflect how it looks here with Chrome on macOS 26, there's space between the table and the add row button
Screenshot 2025-09-23 at 10 43 25

@niikkhilsharma
Copy link
Copy Markdown
Contributor Author

niikkhilsharma commented Sep 23, 2025

The screenshot that I gave is from window 11 Dell Laptop on brave browser.
On the macbook in brave/chrome browser the horizontal scroll bar comes out in a different way. It renders inside the table like in your image. But on windows it renders outside the table like in my image.
I think we need to solve this in a os related manner. Like we need to check if the user is on Macbook then we don't need to give space or something like that.

@niikkhilsharma
Copy link
Copy Markdown
Contributor Author

Hi @etrepum
Just checking in to see if there is any update on my pull request. Please let me know if there is anything else needed from my side to move it forward.Looking forward to your response.

@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Sep 24, 2025

In your last comment you mentioned that there's more work to do so it renders appropriately on more platforms, but it doesn't look like you've done that yet

@niikkhilsharma
Copy link
Copy Markdown
Contributor Author

@etrepum Kindly provide a review. All the fix has been implemented.

@niikkhilsharma
Copy link
Copy Markdown
Contributor Author

niikkhilsharma commented Sep 25, 2025

@etrepum @zurfyx This pull request has been thoroughly tested on both MacBook and Windows environments, and it is functioning correctly in both cases. I kindly request you to proceed with completing the merge at your convenience.

On macbook

image

On windows

WhatsApp Image 2025-09-25 at 20 06 29

@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Sep 25, 2025

Relax, it will get merged when there is time for a maintainer to take another look. This is not the highest priority PR for the project, we are in the middle of a release.

@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Sep 25, 2025

You also don’t have to keep updating the branch unless there’s a conflict to resolve

Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

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

Let's go ahead and simplify this, we don't need to add experimental chrome-specific platform detection code if we also have the fallback

@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Sep 25, 2025

I'll take a quick look after the tests run again and will approve and merge assuming they are passing and the result looks good.

@etrepum etrepum added this pull request to the merge queue Sep 25, 2025
Merged via the queue into facebook:main with commit b1e2b56 Sep 25, 2025
36 checks passed
@niikkhilsharma niikkhilsharma deleted the table-horizontal-scroll branch September 25, 2025 21:17
@etrepum etrepum mentioned this pull request Oct 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. extended-tests Run extended e2e tests on a PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants