Table cells widths are uneven.

[ehmicky]

Problem description: on small screens table cells have uneven widths which looks odd.

This seems to be related to the length of the username and word wrapping.

Reproduction repository: https://github.com/ehmicky/portable-node-guide

Must be looked at on a smartphone.

• all-contributors-cli version: 6.1.2
• node version: 11.11.0
• npm (or yarn) version: 6.9.0

Relevant code or config

{
  "projectName": "portable-node-guide",
  "projectOwner": "ehmicky",
  "repoType": "github",
  "repoHost": "https://github.com",
  "files": [
    "README.md"
  ],
  "imageSize": 100,
  "commit": true,
  "contributors": [
    {
      "login": "ehmicky",
      "name": "ehmicky",
      "avatar_url": "https://avatars2.githubusercontent.com/u/8136211?v=4",
      "profile": "https://twitter.com/ehmicky",
      "contributions": [
        "code",
        "design",
        "ideas",
        "doc"
      ]
    },
    {
      "login": "thatalextaylor",
      "name": "thatalextaylor",
      "avatar_url": "https://avatars3.githubusercontent.com/u/1481643?v=4",
      "profile": "https://github.com/thatalextaylor",
      "contributions": [
        "ideas",
        "doc"
      ]
    },
    {
      "login": "bnoordhuis",
      "name": "Ben Noordhuis",
      "avatar_url": "https://avatars0.githubusercontent.com/u/275871?v=4",
      "profile": "https://github.com/bnoordhuis",
      "contributions": [
        "ideas",
        "doc"
      ]
    },
    {
      "login": "SteveALee",
      "name": "Steve Lee",
      "avatar_url": "https://avatars2.githubusercontent.com/u/618922?v=4",
      "profile": "http://opendirective.com",
      "contributions": [
        "ideas",
        "doc",
        "talk"
      ]
    },
    {
      "login": "tracker1",
      "name": "Michael J. Ryan",
      "avatar_url": "https://avatars3.githubusercontent.com/u/444316?v=4",
      "profile": "http://tracker1.info/",
      "contributions": [
        "ideas"
      ]
    }
  ],
  "contributorsPerLine": 7
}

[Berkmann18]

Thanks for reporting this. I tried a few things but since GH blacklists (inline) CSS it's really tricky to get an HTML-only working approach.

@tbenning @jakebolam Would you guys know another solution?

[jakebolam]

Thanks for reporting this @ehmicky. Any thoughts on approaches to address this?

[ehmicky]

Unfortunately not, sorry :/

I've also noticed that the table is horizontally scrolled on mobile, but I'm not sure if this is intentional and/or this is related.

[Berkmann18]

@ehmicky > I've also noticed that the table is horizontally scrolled on mobile, but I'm not sure if this is intentional and/or this is related.

This is definitely not intentional, I'll try fixing that.

[ehmicky]

@Berkmann18 you can reproduce by checking the same repository I posted above on a mobile screen. Please let me know if you would like me to post a screenshot.

[Berkmann18]

@ehmicky Yes I know, I tried something out but since there's more entries on the row than what my (and certainly your) phone can display, there's that horizontal scrolling even when the table's width is set to 99%.

[Berkmann18]

@ehmicky Have you tried rolling back to the v5 version where markdown was used for the rendering?

[ehmicky]

No I haven't because while this issue does lead to horizontal scrolling, I don't think it justifies rolling back and missing bug fixes and features.

[Berkmann18]

@ehmicky Well, the v5 (if I recall correctly) was generating Markdown tables instead of HTML ones so it probably will fix the issue or part of it.

If the horizontal scrolling were to re-occur, then either changing the contributorsPerLine property in .all-contributorsrc or making the table responsive (which might be hard or perhaps impossible given the restrictions on GH file rendering).

[ehmicky]

Thanks for trying to figure a solution to this issue :)

The horizontal scrolling is still an issue (I just tried it), so it will re-occur.

I tried decreasing contributorsPerLine. It looks better on mobile. However it looks worse on desktop.

Locking the version back to a previous major version for the foreseeable future does not look like a good practice, as I might miss important bug fixes, features or security patches.

The real fix would be to make the table responsive, but I'm not sure if this possible :-/

[Berkmann18]

@ehmicky

Thanks for trying to figure a solution to this issue :)

The horizontal scrolling is still an issue (I just tried it) so it will re-occur.

😞.

I tried decreasing contributorsPerLine. It looks better on mobile. However, it looks worse on the desktop.

That's what I thought would happen in case of no responsiveness.

Locking the version back to a previous major version for the foreseeable future does not look like a good practice, as I might miss important bug fixes, features or security patches.

Good point, I was thinking of having either a separate development channel which would be as up-to-date as the upstream but using v5's Markdown rendering approach or having a submodule/subpackage which was generating the table in Markdown as opposed to doing it in HTML.

What are your thoughts about that?

The real fix would be to make the table responsive, but I'm not sure if this possible :-/

Indeed, however Github's renderer strips out <script>, <style>, style="..." which makes this sort of thing hard (if not impossible).

[ehmicky]

Good point, I was thinking of having either a separate development channel which would be as up-to-date as the upstream but using v5's Markdown rendering approach or having a submodule/subpackage which was generating the table in Markdown as opposed to doing it in HTML? What are your thoughts about that?

Wouldn't it be simpler to re-introduce Markdown rendering in current master but toggled being a configuration option?

[Berkmann18]

@ehmicky Yeah, that's a better idea. @sinchang @jakebolam What do you guys think?

[qyurila]

Improvement for Better Desktop View

After some trials and errors, I ended up reaching the conclusion that specifying width attribute of <td> tag would be visually better, especially on the desktop screen.

Preview Branch

Personally, the combination of <td width="16.66%"> and contributorsPerLine: 6 config option (2nd table of above preview) looks best in the context of both of repo view and file view. The one with contributorsPerLine: 7 does not guarantee given avatar width (100px) in repo view.

The tag of 2nd table would be like this:

<td align="center" width="16.66%">
  <a href="#">
    <img src="#" width="100" alt="Foo Bar"/><br />
    <sub><b>Foo Bar</b></sub>
  </a>
  <br /><a href="#" title="Code">💻</a>
</td>

It requires manual calculation to get the proper percentage value (because we cannot use calc() here), but implementing it shouldn't be too difficult.

Unfortunately, it seems it makes no significant visual improvement on the mobile browser.

[qyurila]

Improvement for Mobile View

The main factor of this problem is long words that is not line-breakable. (e.g. allcontributors[bot], Greenkeeper[bot]) The only ways to make texts line-breakable is setting word-break CSS property to break-all, which is not possible in this case, and inserting Zero-width spaces (​) inside long words fitly.

inserting `& #8203;`

Kent C. Dodds 💬 📖 👀 📢	Jeroen Engels 📖 👀 🔧	Jake Bolam 📖 🔧 🚇 🚧 👀 💬	Tyler Benning 🚧 💻 🎨	Jeff Wen 🚧 👀	Maxim​ilian Berkmann 🌍 📖 🚧 👀 📢	Matheus Rocha Vieira 🌍 💻 📖
Robert Lluberes 🌍	이종진 📖 🌍	Wenqing Xue 🌍	Divjot Singh 📖 👀	Ben Briggs 📖 👀	James Monger 📖	Chris Simpkins 📖 👀
F. Hembe​rger 📖	Daniel Kraft 📖	Mayank Badola 📖 🔧	Marco Biede​rmann 🎨	Itai Stein​herz 📖	Patrick Connolly 📖	Nikola Đuza 📖
Demian Dekon​inck 💻	Michael Peyper 📖	David Sima 📖 🌍	allcontr​ibutors​[bot] 📖	Green​keeper​[bot] 🚇	Maryam Pazir​andeh 📖	Cassa​ndra Venere 📖

The widths of the cells are still different, but it looks way better. The problem is how to insert it automatically and fitly. In the above example, I inserted it in the words that have more than 8 characters.

---

The other (and very hacky) way I found is using NBSP character ( ).

utilizing `& nbsp;`

Kent C. Dodds 💬 📖 👀 📢	Jeroen Engels 📖 👀 🔧	Jake Bolam 📖 🔧 🚇 🚧 👀 💬	Tyler Benning 🚧 💻 🎨	Jeff Wen 🚧 👀	Maximilian Berkmann 🌍 📖 🚧 👀 📢	Matheus Rocha Vieira 🌍 💻 📖
Robert Lluberes 🌍	이종진 📖 🌍	Wenqing Xue 🌍	Divjot Singh 📖 👀	Ben Briggs 📖 👀	James Monger 📖	Chris Simpkins 📖 👀
F. Hemberger 📖	Daniel Kraft 📖	Mayank Badola 📖 🔧	Marco Biedermann 🎨	Itai Steinherz 📖	Patrick Connolly 📖	Nikola Đuza 📖
Demian Dekoninck 💻	Michael Peyper 📖	David Sima 📖 🌍	allcontributors[bot] 📖	Greenkeeper[bot] 🚇	Maryam Pazirandeh 📖	Cassandra Venere 📖

Yes, it looks terrible 😂.

EDIT: I'll add these tables to the above preview repo!

Well, the v5 (if I recall correctly) was generating Markdown tables instead of HTML ones so it probably will fix the issue or part of it.

According to my experience, it barely can solve any problem here. I added markdown table to the preview repo for the comparison, too.

[qyurila]

Additionally, setting valign attribute of <td> to "top" might result the better visual. I added the example about it to preview repo, too.

So I think the best option would be:

<!-- with config contributorsPerLine: 6 -->
<!-- I think 6 should be default or at least highly recommended value -->

<td align="center" valign="top" width="16.66%">
  <a href="#">
    <img src="#" width="100" alt="Foo Bar"/><br />
    <sub><b>verylong&#8203;nameeven&#8203;withouta&#8203;singleca&#8203;pital</b></sub>
  </a>
  <br /><a href="#" title="Code">💻</a>
</td>

[tenshiAMD]

@qyurila hi, thanks for suggesting these workarounds. You wanna give this a shot? PRs are very welcome.

• using width="16.66%" (we can compute this percentage programmatically which iscontributorsPerLine divided by 100)
• using valign (unfortunately this is already deprecated in HTML5)

[qyurila]

@qyurila hi, thanks for suggesting these workarounds. You wanna give this a shot? PRs are very welcome.

Sounds good!

• using valign (unfortunately this is already deprecated in HTML5)

It's unfortunate indeed that not only valign but also align is deprecated 😞

EDIT: Sorry for the referencing commits mess, I didn't remember what happens when I do it 😥

[Berkmann18]

@qyurila @ehmicky Can either of you try with v6.24 and see if it's still an issue?

[qyurila]

@qyurila @ehmicky Can either of you try with v6.24 and see if it's still an issue?

@Berkmann18 The visual got somewhat better but the issue is not quite solved, especially on edge cases (when there are some long single-word usernames).

You can check this branch of my fork to see what the current generation looks like.

[Berkmann18]

@qyurila Do you have a solution or suggestion for this? I've tried an approach similar to how I did for HTML emails but GH isn't nice when it comes to (inline) CSS so it's tricky to get the table to look clean.

[qyurila]

@Berkmann18 I couldn't find any solution to improve this. The main (if not only) cause of the issue is that any long single-word username won't be wrapped, and GitHub simply does not provide any way to force-wrap them. The exception was their mobile app, which always had been showed tables with 100% width IIRC, but some time ago they fixed it.

[Berkmann18]

@qyurila That's unfortunate and yeah the limitations GH puts on HTML/CSS makes stuff like this hard to resolve and they seem fairly slow when it comes to responding to suggestions.