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

[bug 🐛 ]: Filter chips lacks width for longer values #7018

Closed
harshit078 opened this issue Sep 13, 2024 · 4 comments · Fixed by #7025
Closed

[bug 🐛 ]: Filter chips lacks width for longer values #7018

harshit078 opened this issue Sep 13, 2024 · 4 comments · Fixed by #7025
Assignees
@harshit078
Labels
good first issue Good for newcomers prio: high scope: front Issues that are affecting the frontend side only size: short type: bug Something isn't working type: design improvement

Comments

@harshit078
Copy link
Contributor

Bug Description

  • In mobile viewport, Filter chips lacks sufficient width which causes them to break spaces on longer values

Before Behaviour

Screenshot 2024-09-13 at 4 52 43 PM

Expected behavior

Approach 1 -

Screen.Recording.2024-09-13.at.4.53.40.PM.mov

Approach 2-

Screenshot 2024-09-13 at 5 00 28 PM
@harshit078 harshit078 added the type: bug Something isn't working label Sep 13, 2024
@harshit078
Copy link
Contributor Author

@Bonapara, what are your views on this ? Among these approaches, is anyone good for implementing or a new approach.

@Bonapara Bonapara added the blocked: design needed This doesn't seem right label Sep 13, 2024
@Bonapara
Copy link
Member

Hi @harshit078! Thanks for raising the issue. In V1, we should make the filter block horizontally scrollable. (Reset & Save button should not be included in the scroll)

CleanShot.2024-09-13.at.16.15.30.mp4

@Bonapara Bonapara added good first issue Good for newcomers scope: front Issues that are affecting the frontend side only size: short type: design improvement prio: high and removed blocked: design needed This doesn't seem right labels Sep 13, 2024
@rajeshkrishnait
Copy link

Can i take this up?

@harshit078
Copy link
Contributor Author

Hi @rajeshkrishnait, I am currently working on the solution. If I can't get to a solution, then you can surely take it up .

@harshit078 harshit078 mentioned this issue Sep 13, 2024
Merged
harshit078 added a commit to harshit078/twenty that referenced this issue Oct 14, 2024
@harshit078 @lucasbordeau
fix: Filter chips lacks width for longer values (twentyhq#7025)
c5fb9ec 
## Description

Closes twentyhq#7018

- When given longer values, filter chips break-spaces and lack
sufficient width
- As a result, a design overhaul is given to `StyledBar` and
`StyledChipcontainer` components.

## Before

- on Desktop
<img width="1575" alt="Screenshot 2024-09-15 at 1 19 00 AM"
src="https://github.com/user-attachments/assets/f8464c35-01f5-4ad8-8af9-839cd8fa779d">

- On mobile viewport
<img width="436" alt="Screenshot 2024-09-15 at 1 19 26 AM"
src="https://github.com/user-attachments/assets/8ca3e56f-691f-4064-9886-26d561710d61">

<img width="430" alt="Screenshot 2024-09-15 at 1 19 54 AM"
src="https://github.com/user-attachments/assets/3250a19c-f10e-48ac-98a8-f836da0ce53e">


## After

- On desktop
<img width="1575" alt="Screenshot 2024-09-15 at 1 20 41 AM"
src="https://github.com/user-attachments/assets/0cd08c83-3261-495d-8b63-3f8c4f7fe802">

- On mobile viewport
<img width="435" alt="Screenshot 2024-09-15 at 1 25 38 AM"
src="https://github.com/user-attachments/assets/ad5d309c-f34f-4001-87bc-96915e9ad484">



https://github.com/user-attachments/assets/0b4ff758-3b6e-4bd5-8247-6b096fa7d1c0

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@harshit078 harshit078

Labels
good first issue Good for newcomers prio: high scope: front Issues that are affecting the frontend side only size: short type: bug Something isn't working type: design improvement
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Filter chips lacks width for longer values harshit078/twenty
3 participants
@Bonapara @harshit078 @rajeshkrishnait