furyhawk/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-07-21 10:16:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): token activity heatmap never fits without horizontal scrolling

Browse Source
This commit is contained in:
Peter Steinberger
2026-07-20 18:51:26 -07:00
parent cde2e71d43
commit dba21c3022
2 changed files with 43 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/pages/profile/profile-stat-sections.ts
+36 -40
View File
@@ -101,46 +101,42 @@ function renderHeatmapSvg(heatmap: ProfileHeatmap) {
timeZone: "UTC",
});
return html`
<div class="profile-heatmap__scroll">
<svg
class="profile-heatmap__svg"
width=${width}
height=${height}
viewBox="0 0 ${width} ${height}"
role="img"
aria-label=${t("profilePage.heatmapTitle")}
>
${heatmap.monthLabels.map((label, index) =>
label
? svg`<text class="profile-heatmap__month" x=${HEATMAP_LEFT + index * HEATMAP_PITCH} y="10">${label}</text>`
: nothing,
)}
${WEEKDAY_LABEL_ROWS.map(
({ row, utcDay }) =>
svg`<text class="profile-heatmap__weekday" x=${HEATMAP_LEFT - 6} y=${HEATMAP_TOP + row * HEATMAP_PITCH + HEATMAP_CELL - 2}>${weekdayFormat.format(new Date(utcDay))}</text>`,
)}
${heatmap.weeks.map((week, weekIndex) =>
week.days.map((day, dayIndex) => {
if (!day) {
return nothing;
}
const tooltip = `${formatFullDate(day.date)} · ${t("profilePage.heatmapCellTokens", {
tokens: numberFormat.format(day.tokens),
})}`;
return svg`
<rect
class="profile-heatmap__cell profile-heatmap__cell--l${day.level}"
x=${HEATMAP_LEFT + weekIndex * HEATMAP_PITCH}
y=${HEATMAP_TOP + dayIndex * HEATMAP_PITCH}
width=${HEATMAP_CELL}
height=${HEATMAP_CELL}
rx="2.5"
><title>${tooltip}</title></rect>
`;
}),
)}
</svg>
</div>
<svg
class="profile-heatmap__svg"
viewBox="0 0 ${width} ${height}"
role="img"
aria-label=${t("profilePage.heatmapTitle")}
>
${heatmap.monthLabels.map((label, index) =>
label
? svg`<text class="profile-heatmap__month" x=${HEATMAP_LEFT + index * HEATMAP_PITCH} y="10">${label}</text>`
: nothing,
)}
${WEEKDAY_LABEL_ROWS.map(
({ row, utcDay }) =>
svg`<text class="profile-heatmap__weekday" x=${HEATMAP_LEFT - 6} y=${HEATMAP_TOP + row * HEATMAP_PITCH + HEATMAP_CELL - 2}>${weekdayFormat.format(new Date(utcDay))}</text>`,
)}
${heatmap.weeks.map((week, weekIndex) =>
week.days.map((day, dayIndex) => {
if (!day) {
return nothing;
}
const tooltip = `${formatFullDate(day.date)} · ${t("profilePage.heatmapCellTokens", {
tokens: numberFormat.format(day.tokens),
})}`;
return svg`
<rect
class="profile-heatmap__cell profile-heatmap__cell--l${day.level}"
x=${HEATMAP_LEFT + weekIndex * HEATMAP_PITCH}
y=${HEATMAP_TOP + dayIndex * HEATMAP_PITCH}
width=${HEATMAP_CELL}
height=${HEATMAP_CELL}
rx="2.5"
><title>${tooltip}</title></rect>
`;
}),
)}
</svg>
`;
}
ui/src/styles/profile.css
+7 -7
View File
@@ -160,15 +160,15 @@
display: inline-block;
}
.profile-heatmap__scroll {
overflow-x: auto;
/* Latest weeks matter most; keep them in view when the grid overflows. */
direction: rtl;
}
/* viewBox-only sizing scales the whole year to the container so the grid
never overflows; the natural ~772px width would not even fit the 760px
settings column, forcing a permanent horizontal scrollbar. Accepted
tradeoff: tiny phone widths shrink cells/labels rather than reintroduce
scroll — the full-year shape beats a cropped readable slice there. */
.profile-heatmap__svg {
direction: ltr;
display: block;
width: 100%;
height: auto;
}
.profile-heatmap__month,