🖍Fix date picker drop shadow cutoff in static mode

[cvializ]

Also adds slight background color. Feedback welcome.

The drop shadow still appears in overlay mode, but in static mode there is no way to prevent cutting off the shadow inside the overflow:hidden amp element container with layout="{fixed,fixed-height,responsive,etc}".

before	after

[nainar]

Could we potentially do the following:

• On an inner container (your date picker in this case) add a border and then
• Add a parent element to the date picker (the inner container) with the padding on that element being the same width as the shadow you want and then having that parent element have an inward box shadow (using inset)?

[cvializ]

There's a light 1px border in the screenshot. Is that enough border for your first option?

I think for the static picker removing the box-shadow is best. Abby and I chatted and settled on the fact that drop shadow implies that the picker is floating on top of the rest of the content on the page, so it makes sense to only have the drop shadow for the overlay mode.

The problem with adding padding for the shadow is that the left edge of the picker will be shifted a couple of pixels and won't be aligned with the rest of the content above and below it in the layout.

[nainar]

My suggestion was to split up into two steps not two options. (Edited the suggestion to make that clearer.) But yes if you are dropping the idea of adding a shadow in the static option, then this conversation is moot.

[cvializ]

Ah I see what you meant, thanks for explaining that. I haven't seen an inset box-shadow used for a drop shadow before, but it could be a good idea for if we encounter a similar decision point again. But yes, we are dropping the shadow in the static mode for now.

[nainar]

Should have approved with my last comment.