Github Contributions map is broken

[happinyz]

Instead of the calendar, it shows text/data of each day.

[alifirhas]

Glad it's not just me

[szamanr]

likely a bug in the library, follow this issue for updates: https://github.com/Bloggify/github-calendar/issues/169

[polypoyo]

Seems to be a CSS issue. Here's a workaround for now:

.sr-only {
    display: none;
}
td.ContributionCalendar-day {
    min-width: 1em;
    min-height: 1em;
}

td.ContributionCalendar-day[data-level='0'] {
    background-color: var(--color-calendar-graph-day-bg);
}

td.ContributionCalendar-day[data-level='1'] {
    background-color: var(--color-calendar-graph-day-L1-bg);
}

td.ContributionCalendar-day[data-level='2'] {
    background-color: var(--color-calendar-graph-day-L2-bg);
}

td.ContributionCalendar-day[data-level='3'] {
    background-color: var(--color-calendar-graph-day-L3-bg);
}

td.ContributionCalendar-day[data-level='4'] {
    background-color: var(--color-calendar-graph-day-L4-bg);
}

td span {
  position: initial !important;
}

[spaceCabbage]

so im not alone, nice!

[spaceCabbage]

Seems to be a CSS issue. Here's a workaround for now:

.sr-only {
    display: none;
}
td.ContributionCalendar-day {
    min-width: 1em;
    min-height: 1em;
}

td.ContributionCalendar-day[data-level='0'] {
    background-color: var(--color-calendar-graph-day-bg);
}

td.ContributionCalendar-day[data-level='1'] {
    background-color: var(--color-calendar-graph-day-L1-bg);
}

td.ContributionCalendar-day[data-level='2'] {
    background-color: var(--color-calendar-graph-day-L2-bg);
}

td.ContributionCalendar-day[data-level='3'] {
    background-color: var(--color-calendar-graph-day-L3-bg);
}

td.ContributionCalendar-day[data-level='4'] {
    background-color: var(--color-calendar-graph-day-L4-bg);
}

td span {
  position: initial !important;
}

add a little border-radius: 2px;

[the-wright-jamie]

Seems to be a CSS issue. Here's a workaround for now:

Funnily enough, this seems to fix #579 in a weird sort of way 😛

[yeuk0]

Seems to be a CSS issue. Here's a workaround for now:

.sr-only {
    display: none;
}
td.ContributionCalendar-day {
    min-width: 1em;
    min-height: 1em;
}

td.ContributionCalendar-day[data-level='0'] {
    background-color: var(--color-calendar-graph-day-bg);
}

td.ContributionCalendar-day[data-level='1'] {
    background-color: var(--color-calendar-graph-day-L1-bg);
}

td.ContributionCalendar-day[data-level='2'] {
    background-color: var(--color-calendar-graph-day-L2-bg);
}

td.ContributionCalendar-day[data-level='3'] {
    background-color: var(--color-calendar-graph-day-L3-bg);
}

td.ContributionCalendar-day[data-level='4'] {
    background-color: var(--color-calendar-graph-day-L4-bg);
}

td span {
  position: initial !important;
}

I had change this a bit to be more similar to what we had:

.sr-only {
    display: none;
}

td:first-child {
    display: none;
}

div.js-calendar-graph div:last-child {
    display: none;
}

table.ContributionCalendar-grid thead {
    display: none;
}

td.ContributionCalendar-day[data-level='0'] {
    background-color: var(--color-calendar-graph-day-bg);
}

td.ContributionCalendar-day[data-level='1'] {
    background-color: var(--color-calendar-graph-day-L1-bg);
}

td.ContributionCalendar-day[data-level='2'] {
    background-color: var(--color-calendar-graph-day-L2-bg);
}

td.ContributionCalendar-day[data-level='3'] {
    background-color: var(--color-calendar-graph-day-L3-bg);
}

td.ContributionCalendar-day[data-level='4'] {
    background-color: var(--color-calendar-graph-day-L4-bg);
}

[the-wright-jamie]

Throwing my hat in the ring - I use my graph top centre, this centres it and adds rounded corners to the boxes:

.GitHub {
    width:100%;
  display: flex;
  justify-content: center;
}
.sr-only {
    display: none;
}

td:first-child {
    display: none;
}

div.js-calendar-graph div:last-child {
    display: none;
}

table.ContributionCalendar-grid thead {
    display: none;
}

td.ContributionCalendar-day {
    border-radius: 3px;
}

td.ContributionCalendar-day[data-level='0'] {
    background-color: var(--color-calendar-graph-day-bg);
}

td.ContributionCalendar-day[data-level='1'] {
    background-color: var(--color-calendar-graph-day-L1-bg);
}

td.ContributionCalendar-day[data-level='2'] {
    background-color: var(--color-calendar-graph-day-L2-bg);
}

td.ContributionCalendar-day[data-level='3'] {
    background-color: var(--color-calendar-graph-day-L3-bg);
}

td.ContributionCalendar-day[data-level='4'] {
    background-color: var(--color-calendar-graph-day-L4-bg);
}

Result:

[benjamin051000]

How can I apply these workarounds? Not familiar with web dev.

[the-wright-jamie]

How can I apply these workarounds? Not familiar with web dev.

Settings → add widgit → custom css → paste code into textbox

[krystofyah]

added min-width since the boxes appeared squished in my browser

.GitHub {
    width:100%;
  display: flex;
  justify-content: center;
}
.sr-only {
    display: none;
}

td:first-child {
    display: none;
}

div.js-calendar-graph div:last-child {
    display: none;
}

table.ContributionCalendar-grid thead {
    display: none;
}

td.ContributionCalendar-day {
    border-radius: 3px;
min-width: 10px;

}

td.ContributionCalendar-day[data-level='0'] {
    background-color: var(--color-calendar-graph-day-bg);
}

td.ContributionCalendar-day[data-level='1'] {
    background-color: var(--color-calendar-graph-day-L1-bg);
}

td.ContributionCalendar-day[data-level='2'] {
    background-color: var(--color-calendar-graph-day-L2-bg);
}

td.ContributionCalendar-day[data-level='3'] {
    background-color: var(--color-calendar-graph-day-L3-bg);
}

td.ContributionCalendar-day[data-level='4'] {
    background-color: var(--color-calendar-graph-day-L4-bg);
}

[Mathews-Tom]

To all those worked the workaround, thanks a lot. Like magic, everything seems to back to normal. YAAY

[Bruncky]

It still looks weird on my browsers if I remove the custom CSS; just wanted to mention it before someone nukes their custom CSS without copying it first, as I did 🙃

[the-wright-jamie]

It still looks weird on my browsers

Yeah, upstream hasn't fixed yet (repo owner is recovering from a knee injury), and I don't know if a version bump on the packages here will be required - if so we might never see it fixed on Tabliss as the owner has been missing on this repo for over a year.

(I've decided to fork and I'm going to make sure it stays maintained, going to try and build a CI pipeline to automatically publish so that the actual work of maintenance is easier)

[TriAttack238]

This extension is also weird for me, but in a new way:

[davidbudzynski]

I have the same issue as above

[LarveyOfficial]

+1