[BUG] bWLwgP.css breaks dcc.DatePickerSingle

[akbo]

Describe your context

dash                 1.3.0    
dash-core-components 1.2.0    
dash-html-components 1.0.1    
dash-renderer        1.1.0    
dash-table           4.3.0

• OS: macOS 10.14.6
• Browser Chrome
• Version 76.0.3809.132

Describe the bug

The external stylesheet used in many examples in the dcc section of the docs (example), contains CSS about how tables are rendered, breaking how dcc.DatePickerSingle renders.

Stylesheet: https://codepen.io/chriddyp/pen/bWLwgP.css

CSS Lines that break the date picker (438-453):

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
  border-collapse: collapse;
}
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }

Expected behavior

Date picker shows all days of the month and is not cut off (see screenshots below).

Screenshots

Screenshot WITHOUT the CSS:

Screenshot WITH the CSS:

[akbo]

One more note: the documentation itself doesn't render the date picker correctly: https://dash.plot.ly/dash-core-components/datepickersingle

[stereoF]

I have met this problem too....

[christianwengert]

As a sidenote: It is impossible to select the leap date 2020-02-29

[christianwengert]

Solution:

Add

td.CalendarDay {
  padding: 0;
}

to your last included css file. This fixed all problems for me

[alexcjohnson]

Thanks @christianwengert 🏆
I'll fix this in dash-docs, @chriddyp can you update the codepen css?

[chriddyp]

👍 fixed in codepen

[alexcjohnson]

closed by @chriddyp 's codepen edits and https://github.com/plotly/dash-docs/pull/662 in dash-docs.

For anyone else who comes across this, the issue really is overly broad overrides in the codepen and docs CSS - in this case as @christianwengert determined it's the padding we applied to every td and th. You can reset just the CalendarDay class padding to zero, but it's better to not set its padding in the first place, as the default padding actually isn't 0, seems to be 1px. Best of all would be to positively identify the elements you DO want to alter by class, so this kind of collision can't happen again as new components are added or the structure of existing ones changes.