Date slot text gets cut off when spanning more than 36px

[arrenleung]

Please verify the version of auro-datepicker you have installed

2.6.0

Please describe the bug

1. Create a datepicker with date slots populated
2. Set one of the date slots to a price in the thousands, such as $3,344
3. See that the last digit gets cut off

Reproducing the error

This issue is reproducible on the Auro docsite

Expected behavior

One alternative is having the date slot text shrinks to fit instead of having its overflow cut off. As long as we can fit prices up to the 10000s, any workaround would suffice.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Additional context

No response

Exit criteria

No response

[Patrick-Daly-AA]

This was a known issue in initial implementation that we knew we would run into eventually. We have encountered this issue sooner than anticipated. We'll be sending this over to design to determine what the best approach is in general. While we work on this with design, we have some ideas of work arounds:

• removing the comma from 4 digit prices to free up more space
• changing price listings that are 4 digits to be rounded to "$2.21k" (similar to how would be done for miles) to potentially save on space.

Another short term fix we could implement would be dropping the font size by 1 pt, or removing 1 pixel of padding.

@erikalanghauser, looking for your input and guidance on solutions to this

[leeejune]

Like Patrick said, this was a known issue we anticipated. The solution we settled with is the second bullet point that Patrick mentions above.

changing price listings that are 4 digits to be rounded to "$2.21k" (similar to how would be done for miles) to potentially save on space.

Please let me know if further design assistance is needed.

[erikalanghauser]

Hello @Patrick-Daly-AA & @leeejune ,

I have reviewed the new format recommendation for 4 & 5 digit prices with Callie. Showing 2 decimal places will not save any space, so we'd like to use 1 decimal place for 4 digit prices and no decimal places for 5 digit prices.

i.e. instead of $3,333 or $3.33k show $3.3k instead of $33,333 show $33k

LMK if you have any questions.

[braven112]

@erikalanghauser Given that direction we can close this issues for now and if we still run into spacing issues please reopen.