[bug]: date picker is hidden in the board view

[kirtan403]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current behavior

The date picker is hidden when the items are less

Steps to reproduce

1. Create 1 issue
2. Click on the due date
3. You will see the date picker is hidden due to the height of the list

Browser

Google Chrome

Version

Self-hosted

[Palanikannan1437]

I tried reproducing this on the latest "develop" branch, and can't seem to see the "due date" in the board view card

Has this been removed (temp fixed) or am I missing something here....

Tagging @aaryan610 @pablohashescobar for visibility

[aaryan610]

You need to select what properties you want to see in the issue card from the View dropdown in the top right menu.

[Palanikannan1437]

You need to select what properties you want to see in the issue card from the View dropdown in the top right menu.

Ohhh!! Got it, I'm able to reproduce this now! Thanks for the quick response!

[Flavsditz]

I will give it a go on fixing this one.

Just to add to the information:

• This bug only appears when displaying the issues on the "column" layout (see image below)
• When in other views the date view looks fine.

@Palanikannan1437 would you know (or can you point to who does) what the icons are meant to be? Having a mouseover text here wouldn't be a bad idea. Based on the symbols I thought this was about "grouping" and was expecting the columnar view to be the 4th button (before the Gannt/Roadmap one)

[Palanikannan1437]

Hey @Flavsditz, that'd be so awesome!!

A tooltip on these definitely sounds like a cool idea!

From the left, the icons are

1. list view
2. board view
3. calendar view
4. I'm not able to see it in the cloud version/the latest develop branch (could you please help me out with your environment/setup?)
5. gantt chart view

This is how it looks for me,

@aaryan610 and Plane crew folks would be better able to guide you here, thanks

[Flavsditz]

@Palanikannan1437 I will put this in the PR.

I found the issue which is that we have overflow: hidden and overflow-y: scroll set to the column and that is an issue for the calendar when it gets poped-up.

I have been testing different approaches to conditionally change the rules only when the height requires or we have a minimum for the calendar.

• Container query: has a weird effect where the height doesn't get recognized and defaults to 0 rendering the height query unusable and thus not being an option, although it would be the most elegant solution
• JS Size event: checking if the column has a certain size and adapting the classes accordingly works great but during re-rendering the size of the column changes causing weird glitches. There are ways around it using a debounce and other tricks but this is just patchy code at best.
• The current most simple solution is dependable on the size of a task. I.e. if we have min 4 tasks than we also have space for the calendar to display correctly with the scroll of the column.

My question is: the last option would break in very small heights, while I am wrecking my head around it, I've noticed a lot of other features break in small screen so I was wondering: is there a minimum viewport size supported?

I ask this because just like Jira for example, it could be aimed at desktop users and thus it would be ok to take some technical decisions. Wdyt?

[aaryan610]

This issue has been fixed and is live on https://app.plane.so