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.

Sign up for GitHub

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

Jump to bottom

fix: Handling filename overflow in mobile viewports #7364

Merged
merged 6 commits into from
Oct 10, 2024
Merged

fix: Handling filename overflow in mobile viewports #7364

merged 6 commits into from
Oct 10, 2024

Conversation

sid0-0
Copy link
Contributor

@sid0-0 sid0-0 commented Sep 30, 2024 •
edited by lucasbordeau
Loading

Fixes #7330
Fixes #7516

greptile-apps[bot]
greptile-apps bot reviewed Sep 30, 2024
View reviewed changes
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

This pull request optimizes the display of long filenames in the files page for mobile viewports, addressing issue #7330.

  • Modified StyledLink in AttachmentRow.tsx to use flex-grow: 1 and overflow: auto for better text overflow handling
  • Adjusted StyledRow layout to use justify-content: space-between for improved spacing
  • Updated StyledLeftContent to use flex-grow: 1 for flexible width allocation
  • Removed fixed width from StyledLink and added width: 0 to allow proper text truncation

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

packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx Outdated Show resolved Hide resolved
@lucasbordeau lucasbordeau self-assigned this Oct 10, 2024
lucasbordeau
lucasbordeau approved these changes Oct 10, 2024
View reviewed changes
Copy link
Contributor

@lucasbordeau lucasbordeau left a comment

Choose a reason for hiding this comment

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

@sid0-0 Thanks for the fix, I used this nice use case to fix a long-standing problem with the overflow cascade of our page right container.

@lucasbordeau
Copy link
Contributor

@Bonapara I refactored the activity list and rows into a common component to harmonize the UI.

Before :

Capture d’écran 2024-10-10 à 09 43 38 Capture d’écran 2024-10-10 à 09 44 04 Capture d’écran 2024-10-10 à 09 44 09

After :

Capture d’écran 2024-10-10 à 09 44 18 Capture d’écran 2024-10-10 à 09 44 23 Capture d’écran 2024-10-10 à 09 44 30

@lucasbordeau
Copy link
Contributor

lucasbordeau commented Oct 10, 2024 •
edited
Loading

@charlesBochet I fixed the show page right container overflow mismatch which was causing a lot of unwanted scrolling behaviors and forced us to apply CSS tricks to force overflow into deeply nested child components.

@Bonapara
Copy link
Member

@lucasbordeau related to #7516 ?

@lucasbordeau lucasbordeau mentioned this pull request Oct 10, 2024
Closed
@lucasbordeau lucasbordeau merged commit 7b7c67f into twentyhq:main Oct 10, 2024
10 of 11 checks passed
@github-actions GitHub Actions
Copy link

Thanks @sid0-0 for your contribution!
This marks your 5th PR on the repo. You're top 6% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter

Contributions

harshit078 pushed a commit to harshit078/twenty that referenced this pull request Oct 14, 2024
@sid0-0 @lucasbordeau @harshit078
fix: Handling filename overflow in mobile viewports (twentyhq#7364)
f1303a5 
Fixes twentyhq#7330
Fixes twentyhq#7516 

<div style="display: flex">
<img style="max-width:50%"
src="https://github.com/user-attachments/assets/51027a9d-8745-4cc7-9f17-4000e3615e44"/>
<img style="max-width:50%"
src="https://github.com/user-attachments/assets/827f69ba-c581-402f-9498-6b1a4dde7b69"/>
</div>

---------

Co-authored-by: sid0-0 <[email protected]>
Co-authored-by: Lucas Bordeau <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

@lucasbordeau lucasbordeau lucasbordeau approved these changes

Assignees

@lucasbordeau lucasbordeau

Labels
-PR: awaiting CI
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Tasks page overflows on Adding a task Long File name is not optimised for mobile viewports
3 participants
@sid0-0 @lucasbordeau @Bonapara