2 and 3-digit reference numbers overflow into reference title

[dhimmel]

trafficstars

https://github.com/manubot/rootstock/commit/defe787b0ad8a21a745cc82c3117770896caaf8b updated Pandoc which caused the HTML bibliography styling to change. We also updated our plugins.

Notice the layout of the reference numbers before: https://greenelab.github.io/connectivity-search-manuscript/v/650112ab029fbe6ce1f8acdf65d7d60da03fa49f/#references

And now after (currently): https://greenelab.github.io/connectivity-search-manuscript/v/dd6f847953b86d415d0fa8b45e71923bf5f44fb6/#references

The new layout where the list numbers are separated into their own column looks nicer, but currently does not adapt well to double digit numbers. For manuscripts with 100+ references, the issue might be even worse. @vincerubinetti is there a way we could accommodate three-digit numbers in the list? And/or have more spacing after the 2-digit numbers?

[agitter]

The COVID-19 review has 4 digit reference numbers. This HTML artifact shows how those look

[dhimmel]

Ah that is actually not bad. I was worried the text would overlap. The minimal fix would probably be to ensure that there is at least one space after the number period? @vincerubinetti what do you think?

[vincerubinetti]

Indeed, I checked to make sure the text wouldn't overlap in that last PR.

A space is already there after the period, but you'd probably want two. Whitespace gets collapsed in HTML, so you'd have to write   . I'm not sure if that will work in the CSL definition though.

Here is how it looks with two:

To avoid the alignment issue, a better solution is to just increase the left margin of the right side of the citation. This would be the style to add (somewhere in default.html theme, there may be a section already for references):

.csl-right-inline {
  margin-left: 3em;
}

Anywhere from 2.5em to 3em looks good to me.

[dhimmel]

To avoid the alignment issue, a better solution is to just increase the left margin of the right side of the citation

Nice. I like that. Did you want to make a PR for this?

[vincerubinetti]

I'm on vacation this week, but I can do it on the 28th, or you can do it. It's not critical though, just a minor aesthetic issue.

[dhimmel]

Enjoy the vacation 🏖️ & take your time. Not urgent at all.