Compact awards layout: group by week or sticky header?

[VasilevNStas]

Problem

On the vitals page (https://zerocracy.github.io/judges-action/zerocracy-vitals.html), clicking on a user's award count expands a list of individual awards. Currently, each award is rendered as a separate table row distributed across week-columns. Since each award belongs to only one week, only one cell per row is filled — the rest are empty.

Current layout (simplified):

| @user | fix bug #1   | +128 |      |      |
|       | fix bug #2   |      | +64  |      |
|       | fix bug #3   |      |      | +32  |
|       | fix bug #4   | +18  |      |      |
|       | fix bug #5   |      | +20  |      |

Issues:

1. Horizontal sprawl. The more weeks in the rolling balance (typically 4+), the wider the table. Each new week shifts content to the right.
2. Sparse layout. With 20+ awards you get 20+ rows but only one filled cell per row — wasteful and hard to scan.
3. Lost header context. When rows scroll below the viewport, the week-number headers (w23, w24, …) are no longer visible.

---

Two proposed approaches

A reference branch with both implementations: 131-compact-awards-layout

---

Option A: Group awards by week (one row per user)

Replace the per-award row loop with a single row per user. Each week column contains a vertical list (<div>) of all awards from that week, showing both the reason (why) and the value (award).

Result (simplified):

| @user |         | fix #1: +128    | fix #3: +32     |
|       |         | fix #4: +18     | fix #5: +20     |
|       |         | fix #2: +64     |                  |

Changes:

• xsl/awards.xsl — the <xsl:for-each select="$facts[who_name=$name]"> loop (lines 387–436) replaced by a single <tr>. For each week, all awards in that week are collected via $user_facts[z:in-week(when, $week)].
• Each award entry is a <div class="award-item"> containing why text and award value (linked via href).
• sass/awards.scss — added .award-item { white-space: nowrap; line-height: 1.6; }.

Pros:

• Compact — one row per user, not per award
• No wasted empty cells
• The reason (why) stays next to each value

Cons:

• white-space: nowrap widens columns to fit the longest why text
• Without nowrap, text wraps inside cells and creates multi-line entries
• Loses the visual "activity density" per week (easy to see which weeks were busiest at a glance)

---

Option B: Sticky header (fixed week headers)

Keep the current per-award row layout unchanged. Only CSS is modified: make <thead> sticky so week numbers stay visible when scrolling down.

Changes:

• CSS-only, no XSL changes
• sass/awards.scss — add position: sticky; top: 0; z-index: 1 to #awards thead

Pros:

• Minimal change, low risk
• Familiar layout preserved
• Week headers always visible

Cons:

• Sparse layout remains — many rows with one filled cell
• Horizontal sprawl still there
• Still uncomfortable on wide screens

---

Discussion welcome. Which option is better? Or is there a third way?

[VasilevNStas]

@yegor256 please read this

[0crat]

@VasilevNStas Thanks for suggesting an enhancement! You've earned +18 points. If you find anything else in the repository that doesn't look as good as you might expect, do not hesitate to report bugs too. Your running score is +106; don't forget to check your Zerocracy account too).