Repo file list enhancements

[silverwind]

1. restore background color
2. fix border radius on top/bottom and on hover
3. changed row border from 1px bottom to .5px top and bottom so it looks equal on both sides when hovering. i think this is a problem introduced by display: contents, not sure if there is a better solution.
4. parent link is now full-row again, much easier to click
5. parent link now uses directory icon, matching github
6. changed grid layout to remove auto width on file name column which could get too small.
7. mobile layout now shows more of the filename.

[silverwind]

BTW I noticed one regression which I'm not sure yet how to solve. The ... button is invisible:

[wxiaoguang]

4. changed row border from 1px bottom to .5px top and bottom so it looks equal on both sides when hovering. i think this is a problem introduced by display: contents, not sure if there is a better solution.

I do not see why. The layout is:

--- boder-top ----
padding-top
text
padding-bottom
--- boder-top ---- (of next item)

Why it doesn't look equal?

[wxiaoguang]

BTW I noticed one regression which I'm not sure yet how to solve. The ... button is invisible:

It doesn't seem to be a regression.

[silverwind]

4. changed row border from 1px bottom to .5px top and bottom so it looks equal on both sides when hovering. i think this is a problem introduced by display: contents, not sure if there is a better solution.

I do not see why. The layout is:

--- boder-top ----
padding-top
text
padding-bottom
--- boder-top ---- (of next item)

Why it doesn't look equal?

Here is how it looked before:

border-top of item below not visible here because background overlaps it. I think this is because of display: contents.

[silverwind]

BTW I noticed one regression which I'm not sure yet how to solve. The ... button is invisible:

It doesn't seem to be a regression.

We can handle it in another PR. It will require changes to .commit-summary which is tricky to modify because the class is also used in commit list and IIRC single commit view.

[wxiaoguang]

Here is how it looked before:
border-top of item below not visible here because background overlaps it. I think this is because of display: contents.

Strange, the border-top of item below is actually there on my side:

[silverwind]

Seems this is a Firefox bug, but the display on Chrome is not perfect either because border colors do not match on hover:

[wxiaoguang]

Seems this is a Firefox bug, but the display on Chrome is not perfect either because border colors do not match on hover:

Unable to produce on my Firefox 133.0.3 (aarch64)

[wxiaoguang]

And the Chrome color seems right too

[silverwind]

Hmm odd. On main branch, rendering does look same as Chrome in my Firefox.

So it must been something in my PR.

[silverwind]

And the Chrome color seems right too

Check with a color picker, the borders are not equal color.

[wxiaoguang]

And the Chrome color seems right too

Check with a color picker, the borders are not equal color.

It is caused by the alpha chanel: --color-hover: #00001708;

[silverwind]

Yeah I think we need an opaque hover color, maybe there is one already as I recall having this problem in the past already.

[wxiaoguang]

Yeah I think we need an opaque hover color, maybe there is one already as I recall having this problem in the past already.

So the 0.5px border still has the same problem 🤣

If it is not a must, I'd like to keep using the single "border-top: 1px", it should be clearer.

[silverwind]

Yeah I will likely revert to 1px and make the color opaque. It does seem I need to add a new CSS variable unfortunately.

[silverwind]

WIP until I fix the hover border color issue.

[wxiaoguang]

Actually there could be another choice without using the "border trick"

<div divider>
<div item> name message age</div>
<div divider>
<div item> name message age</div>

Make the "divider" full line in the grid

[silverwind]

Note sure how I feel about introducing divider elements, it seems clumsy.