Table cells widths are uneven. #173

ehmicky · 2019-03-11T10:39:44Z

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
}

The text was updated successfully, but these errors were encountered:

Berkmann18 · 2019-03-11T12:09:03Z

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 · 2019-03-16T13:47:53Z

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

ehmicky · 2019-03-16T13:50:29Z

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 · 2019-03-16T21:14:33Z

@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 · 2019-03-16T21:21:34Z

@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.

re #173

Berkmann18 · 2019-03-16T23:07:08Z

@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 · 2019-04-15T13:07:52Z

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

ehmicky · 2019-04-15T13:44:38Z

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 · 2019-04-15T14:00:41Z

@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 · 2019-04-15T14:24:56Z

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 · 2019-04-15T15:13:17Z

@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 · 2019-04-15T15:20:12Z

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 · 2019-04-15T15:29:09Z

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

qyurila · 2022-10-10T12:24:28Z

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 · 2022-10-10T13:49:40Z

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} 🚧 👀	_{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} 📖

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 · 2022-10-10T15:04:32Z

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 · 2022-10-10T15:34:20Z

@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 · 2022-10-10T15:42:08Z

@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 · 2022-11-02T20:58:57Z

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

qyurila · 2022-11-03T06:40:18Z

@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 · 2022-12-01T21:08:46Z

@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 · 2022-12-08T09:00:27Z

@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 · 2023-01-05T21:11:33Z

@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.

Berkmann18 added bug status: available priority: high good first issue labels Mar 11, 2019

Berkmann18 added a commit that referenced this issue Mar 16, 2019

style: set table width

ce9a381

re #173

Berkmann18 mentioned this issue May 13, 2019

Minimal Version all-contributors/all-contributors#85

Closed

Berkmann18 pushed a commit that referenced this issue May 24, 2020

docs: contributing slack (#173)

5b139b1

tenshiAMD added the pinned label Sep 7, 2022

qyurila mentioned this issue Oct 10, 2022

feat: Add width and valign attributes for cleaner <td> #344

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table cells widths are uneven. #173

Table cells widths are uneven. #173

ehmicky commented Mar 11, 2019

Berkmann18 commented Mar 11, 2019

jakebolam commented Mar 16, 2019

ehmicky commented Mar 16, 2019

Berkmann18 commented Mar 16, 2019

ehmicky commented Mar 16, 2019

Berkmann18 commented Mar 16, 2019

Berkmann18 commented Apr 15, 2019

ehmicky commented Apr 15, 2019 •

edited

Loading

Berkmann18 commented Apr 15, 2019

ehmicky commented Apr 15, 2019 •

edited

Loading

Berkmann18 commented Apr 15, 2019 •

edited

Loading

ehmicky commented Apr 15, 2019 •

edited

Loading

Berkmann18 commented Apr 15, 2019

qyurila commented Oct 10, 2022 •

edited

Loading

qyurila commented Oct 10, 2022 •

edited

Loading

qyurila commented Oct 10, 2022 •

edited

Loading

tenshiAMD commented Oct 10, 2022 •

edited

Loading

qyurila commented Oct 10, 2022 •

edited

Loading

Berkmann18 commented Nov 2, 2022

qyurila commented Nov 3, 2022 •

edited

Loading

Berkmann18 commented Dec 1, 2022

qyurila commented Dec 8, 2022

Berkmann18 commented Jan 5, 2023

Table cells widths are uneven. #173

Table cells widths are uneven. #173

Comments

ehmicky commented Mar 11, 2019

Berkmann18 commented Mar 11, 2019

jakebolam commented Mar 16, 2019

ehmicky commented Mar 16, 2019

Berkmann18 commented Mar 16, 2019

ehmicky commented Mar 16, 2019

Berkmann18 commented Mar 16, 2019

Berkmann18 commented Apr 15, 2019

ehmicky commented Apr 15, 2019 • edited Loading

Berkmann18 commented Apr 15, 2019

ehmicky commented Apr 15, 2019 • edited Loading

Berkmann18 commented Apr 15, 2019 • edited Loading

ehmicky commented Apr 15, 2019 • edited Loading

Berkmann18 commented Apr 15, 2019

qyurila commented Oct 10, 2022 • edited Loading

Improvement for Better Desktop View

Preview Branch

qyurila commented Oct 10, 2022 • edited Loading

Improvement for Mobile View

qyurila commented Oct 10, 2022 • edited Loading

tenshiAMD commented Oct 10, 2022 • edited Loading

qyurila commented Oct 10, 2022 • edited Loading

Berkmann18 commented Nov 2, 2022

qyurila commented Nov 3, 2022 • edited Loading

Berkmann18 commented Dec 1, 2022

qyurila commented Dec 8, 2022

Berkmann18 commented Jan 5, 2023

ehmicky commented Apr 15, 2019 •

edited

Loading

ehmicky commented Apr 15, 2019 •

edited

Loading

Berkmann18 commented Apr 15, 2019 •

edited

Loading

ehmicky commented Apr 15, 2019 •

edited

Loading

qyurila commented Oct 10, 2022 •

edited

Loading

qyurila commented Oct 10, 2022 •

edited

Loading

qyurila commented Oct 10, 2022 •

edited

Loading

tenshiAMD commented Oct 10, 2022 •

edited

Loading

qyurila commented Oct 10, 2022 •

edited

Loading

qyurila commented Nov 3, 2022 •

edited

Loading