Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: last field overflow #8510

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

harshrajeevsingh
Copy link
Contributor

@harshrajeevsingh harshrajeevsingh commented Nov 15, 2024

Fixes: #7216

The issue was caused by the min-width property of StyledEditableCellEditModeContainer. So, I removed it.

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

PR Summary

Fixed overflow issue in table cells by removing min-width property from StyledEditableCellEditModeContainer, allowing input fields to shift left instead of extending beyond screen boundaries.

  • Modified packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx to remove min-width constraint
  • Potential concern: remaining min-width: 200px in StyledTableCellInput could still cause overflow issues

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

@lucasbordeau lucasbordeau self-assigned this Nov 15, 2024
@lucasbordeau
Copy link
Contributor

@harshrajeevsingh This issue should be fixed by using the overflow detection mechanism from the library we use for dropdowns : floating-ui.

The trick is to tell the dropdown to watch for overflow against the main app container.

Try this :

flip({
        boundary: document.querySelector('#root') ?? undefined
      }),

In RecordInlineCellEditMode

@harshrajeevsingh
Copy link
Contributor Author

harshrajeevsingh commented Nov 15, 2024

Hey, @lucasbordeau Thanks for the input. I'm already familiar with this package since I solved many related issues earlier in this repo.
I think you are looking at the issue's image provided by Bonapara but the issue is a bit different now. You can see the issue more clearly here:
#7216 (comment)
Instead of overflowing out of the container, it stretches the table body.

I tried the code you provided above, but it didn't work. I think the issue is indeed happening due to the width of the StyledEditableCellEditModeContainer because that's the reference for the floating element: StyledTableCellInput.

Removing the excessive width larger than the inline cell makes the detection overflow work and the element is positioned based on the available viewport. Also, removing it won't cause any problem since StyledTableCellInput has the same min-width: 200px which keeps the same floating style wherever needed.

Screencast.from.2024-11-16.00-05-49.webm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Last field overflows to the screen's right edge
3 participants