Date picker clips through navigation bar in mobile

[harshit078]

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.

[sephialaureenciaa]

Hi, Can I contribute to this?

[HKS07]

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

Full.Screen.mp4

Mobile Screen

Small.Screen.mp4

Please tell me if any changes are needed.

[Bonapara]

Thanks @HKS07. Is the calendar still cropped on mobile? At what point does it start getting cropped?

[HKS07]

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?

[Bonapara]

I think it should work up to 360px @HKS07. We should aim for the same "desired behavior" as in this issue: #7216

I also noticed an overflow issue with the navbar in your screenshot, @harshit078:

[harshit078]

@Bonapara, you are correct ! It overflows through the navigation bar if the user scrolled down and it will not reposition itself.

Screen.Recording.2024-09-24.at.11.02.29.AM.mov

[Bonapara]

/oss.gg 150

[oss-gg]

Thanks for opening an issue! It's live on oss.gg!

[oss-gg]

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.

[harshrajeevsingh]

/assign

[oss-gg]

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]

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:

[Bonapara]

@lucasbordeau will have a better idea on this ;)

[oss-gg]

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 🚀

[harshrajeevsingh]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[harshrajeevsingh]

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.

[oss-gg]

Issue unassigned.

[harshrajeevsingh]

/assign

[oss-gg]

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 🚀

[oss-gg]

@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.

[oss-gg]

@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.

[oss-gg]

@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.

[charlesBochet]

/unassign

[oss-gg]

Issue unassigned.