Problems with Merge Confidence PR styling

[HonkingGoose]

Problem:

The badges for Age and Passing shrink down to unreadable sizes when the viewport is made smaller.
This affects the New and Low confidences badges, and might affect other badges in the range as well.

Pictures:

Full viewport:

Small viewport:

How to reproduce:

1. Go to a PR which has merge confidence enabled.
2. Look at PR with a full width viewport, note all badges readable.
3. Shrink down viewport width, note Age and Passing badges become way too small.

PR where these pictures are coming from:

HonkingGoose/git-gosling#94

[rarkins]

Is this possible to fix though? The browser appears to be adapting based on a combination of column header with / badge width.

[HonkingGoose]

The browser appears to be adapting based on a combination of column header with / badge width.

I've tested this, badge size is based on column header size.

Reproduction:

1. Open PR in browser.
2. Open dev-tools.
3. Adjust table headers to only use one character per table header.
4. Play with viewport size.
5. Note that all badges shrink down to really tiny sizes.

[rarkins]

Given a small enough viewpoint, won't all badges shrink? Or there is there some minimum based on the column header width?

[HonkingGoose]

There is a minimum width based on the column header width.

Badges more or less keep normal size with larger column text:

---

I also noticed something else when I was changing the column header text.
The longer text exposed that the badges are not centered in their columns.

You can use :---: instead of --- in the GitHub Flavoured Markdown tables to center the badges horizontally:

| Package | Change | Age | Adoption | Passing | Confidence |
| :---: | :---: | :---: | :---: | :---: | :---: |
| [@mdx-js/react](https://mdxjs.com) ([source](https://togithub.com/mdx-js/mdx)) | [`1.6.21` -> `1.6.22`](https://renovatebot.com/diffs/npm/@mdx-js%2freact/1.6.21/1.6.22) | [![age](https://badges.renovateapi.com/packages/npm/@mdx-js%2freact/1.6.22/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/@mdx-js%2freact/1.6.22/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/@mdx-js%2freact/1.6.22/compatibility-slim/1.6.21)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/@mdx-js%2freact/1.6.22/confidence-slim/1.6.21)](https://docs.renovatebot.com/merge-confidence/) |

Live example of fix:

Package	Change	Package age	Adoption rate	Passing tests	Confidence level
@mdx-js/react (source)	1.6.21 -> 1.6.22

Picture of badges not center aligned:

[rarkins]

Great finding!

We serve the badges on all platforms so need to determine:

• do the others support this, or it looks wrong?
• should we just massage tables in general to centered in the github platform code? (where we perform other platform-specific markdwon massaging)

And then the other part of what you've found is whether we should use deliberately more verbose column headings in order to get more predictability for badge sizes.

[HonkingGoose]

Platform support for Markdown center aligned tables

Platform	Supports Markdown center tables
GitHub	Yes
GitLab	Yes
Azure DevOps	Yes
Bitbucket	No

GitHub supports centering Markdown tables

Quote from GitHub Flavored Markdown Spec, 4.10 Tables:

4.10 Tables (extension)

GFM enables the table extension, where an additional leaf block type is available.

The delimiter row consists of cells whose only content are hyphens (-), and optionally, a leading or trailing colon (:), or both, to indicate left, right, or center alignment respectively.

GitLab supports centering Markdown tables

Quote from GitLab Markdown guide, tables:

Additionally, you can choose the alignment of text within columns by adding colons (:) to the sides of the “dash” lines in the second row.

Azure DevOps supports centering Markdown tables:

Azure DevOps, Markdown Guidance, tables

Use colons (:) when dividing the header and body of tables to specify column alignment (left, center, right)

BitBucket uses CommonMark tables only, so cannot use centered tables

Bitbucket server, markdown syntax guide

[rarkins]

Here's a screenshot example of a table with multiple rows:

Here's how it looks all center-aligned:

I wasn't sure about the Package column, but I think it looks ok?

[HonkingGoose]

I think the Package column should be left-aligned.

Also the badge content itself can grow, if Age becomes say 1 month that whole column gets out of whack with the others that might have 20 days still. Same problem with Confidence, as that can have different sizes as well (low, medium, high, etc.).

Maybe you're better of doing the table in plain HTML and then add some CSS Grid magic to align everything nicely.

[rarkins]

Most platforms don't allow any custom CSS, so that's not an option.

[HonkingGoose]

Most platforms don't allow any custom CSS, so that's not an option.

But you can embed HTML in a Markdown file, and then add inline CSS maybe?

This is a regular paragraph.

<table>
    <tr>
        <td style="center-align: true, or whatever works in CSS">Foo</td>
    </tr>
</table>

This is another regular paragraph.

[HonkingGoose]

And then the other part of what you've found is whether we should use deliberately more verbose column headings in order to get more predictability for badge sizes.

This will work for most cases, but word-wrap is causing problems. In some cases the words are being put below each other in the column, that causes the column to shrink again...

[rarkins]

But you can embed HTML in a Markdown file, and then add inline CSS maybe?

I believe GitHub and probably others strip out inline CSS.

So maybe we skip center-aligning so that the badges left-align with each other?

That leaves column width remaining.

The Age badge is probably narrow because the column heading is only 3 characters and the badge itself is not wide either. Another possibility could be to add invisible   characters like   Age   but we need to check how that appears in each platform.

I think Passing looks too small because the badge itself is wide due to the text "low data". An alternative would be to use the ⏳ symbol(s) in place. Although it's less intuitive than "low data", if the badge links to documentation explaining that's what it means then people only really need to learn that once.

[HonkingGoose]

I believe GitHub and probably others strip out inline CSS.

Ok, inline CSS is out then. 😄

So maybe we skip center-aligning so that the badges left-align with each other?

If we cannot be consistent for all platforms, it's probably better to just use the default left-align, and accept that some combinations of badges can look a bit weird in a table with multiple rows.

An alternative would be to use the ⏳ symbol(s) in place.

That's a possibility to fix the Passing badges,, but it's not very descriptive on its own without reading the docs.
So I'd prefer to keep the text in there.

I hope that the   thing works, as that might be a good way to make the columns a bit bigger, so that the badge size is preserved.