Improve labels-list rendering

[silverwind]

The issue sidebar was using a different gap between labels then other places in the UI. Remove the tailwind class to make this rule take effect:

.labels-list {
  gap: 2.5px;
}

Before:

After:

[wxiaoguang]

The larger gap seems more conformable

Should we enlarge the gap in .labels-list?

[silverwind]

Could go to 3px, maybe 4px. GitHub uses 4px.

[wxiaoguang]

Could go to 3px, maybe 4px. GitHub uses 4px.

Or just 0.25em like other inline gaps.

(0.25em seems to be 4px)

[silverwind]

.25rem is consistent because our root unit is 14px.

Did a number of enhancements. Now using margin instead of gap. By using display: contents the list can now wrap in all 3 cases:

[silverwind]

Found one more bug while testing, I will fix.

[silverwind]

Almost perfect now, one issue remains here, the avatars should not render like that one the second line of the list. Maybe it needs a wrapper element because of display:contents making it behave inline:

[silverwind]

I guess I may change it to only set display: contents where needed, e.g. in the issue list title and issue history. Will take a break from this, more work later.

[silverwind]

I'm not satisfied yet, hold on with merging.

[wxiaoguang]

Let's merge?

[silverwind]

Not yet, will do one hopefully final round of review.

[silverwind]

btw I see a cut-off "g" in your screenshot above. Is it still an issue?

[wxiaoguang]

btw I see a cut-off "g" in your screenshot above. Is it still an issue?

That's an old screenshot. New commits should have fixed the "line-height: 1" problem. See the latest screenshot

[wxiaoguang]

Not yet, will do one hopefully final round of review.

Then 4adf1e3, more changes, more complicated, and no unnecessary "a" wrapper now.

If it doesn't look good, feel free to revert

[silverwind]

Not yet, will do one hopefully final round of review.

Then 4adf1e3, more changes, more complicated, and no unnecessary "a" wrapper now.

If it doesn't look good, feel free to revert

This change isn't complete, it only affects the labels in the issue history, not the ones in sidebar or issue list. I think we should make all places use the same rendering code or sub-template.

[wxiaoguang]

This change isn't complete, it only affects the labels in the issue history, not the ones in sidebar or issue list. I think we should make all places use the same rendering code or sub-template.

Yes, I know. I intentionally didn't touch unrelated code, the commit only added basic "label with link" support, but didn't rewrite everything (otherwise there will be far more changes). Other changes can be left to the future.

If you don't like, just revert. I can accept either:

• Keep the current basic "label with link" support, don't introduce more changes
• Keep old a + label layout, revert/reset new commits

But not introduce more changes in this PR

[silverwind]

There is a EXTRA error on the /issues page:

[silverwind]

Yeah lets fix the remaining issues and then merge this. Fully .a.ui.label change can come later for all I care.

[silverwind]

It does look rather broken here, I assume this is because of the EXTRA errors:

[silverwind]

@wxiaoguang care to fix these EXTRAs?

[wxiaoguang]

@wxiaoguang care to fix these EXTRAs?

Already fixed in eb2a642 , and added some more tests in 43e7745