twentyhq
Date picker clips through navigation bar in mobile
Bug Description
- Go to people in companies/people, Choose any Last update/Creation date and scroll to end of the page.
- this only happens when scrolled to either the end of page or with respect to the section
Current Behaviour
Expected behavior
It should automatically reposition it's orientation to top just like Phone number field.
Hey @Bonapara and @harshit078 can I work on this.
I have already done some changes to the UI as shown in video for both full screen and mobile screen.
Full Screen
https://github.com/user-attachments/assets/996729d9-3231-426c-a0ea-5b1ea26b726a
Mobile Screen
https://github.com/user-attachments/assets/5dcd775b-2656-409f-8dd9-2bcc6ea87c1e
Please tell me if any changes are needed.
Thanks @HKS07. Is the calendar still cropped on mobile? At what point does it start getting cropped?
It is starting cropped around 420 px [width].
Shouldn't there be media query used to make it compatible for small size devices? If yes, then what width should I target?
I think it should work up to 360px @HKS07. We should aim for the same "desired behavior" as in this issue: https://github.com/twentyhq/twenty/issues/7216
I also noticed an overflow issue with the navbar in your screenshot, @harshit078:
@Bonapara, you are correct ! It overflows through the navigation bar if the user scrolled down and it will not reposition itself.
https://github.com/user-attachments/assets/96073cc8-0e00-4e83-9eb2-b8eb37a6b6b3
![oss-gg[bot] avatar](https://avatars.githubusercontent.com/in/835270?v=4 "Published by a pub.dev verified publisher"){kind=small}
You already have an open issue assigned to you here. Once that's closed or unassigned, only then we recommend you to take up more.
Assigned to @harshrajeevsingh! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀
Hey, @Bonapara. I worked on this issue today and found that the datePicker component is overflowing not only on mobile but also on the desktop. The react-datePicker uses floating UI package to auto-position the element based on the viewport. After debugging, I found that floating UI is not working for the datePicker component because it's wrapped inside a parent div. Therefore, we need to remove the parent div to make this work. Down below I attached some screenshots to check. Lemme know what approach should I take.
Before:
After:
Assigned to @manav-gopal! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀
Hey @manav-gopal Are you still working on this? I got it fixed. If you are not working unassign yourself. So, I can raise a PR.
Assigned to @harshrajeevsingh! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀
@harshrajeevsingh, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.
@harshrajeevsingh, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.
@harshrajeevsingh, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.
