fixed a bug with mobile devices that makes it so the commit date in the contribution section overlaps thru the tui border

This commit is contained in:
dvorakmortonxd 2026-05-19 12:01:20 +02:00
commit 0ca9b14661
2 changed files with 149 additions and 14 deletions

View file

@ -125,9 +125,9 @@ export default function ContributionHeatmap() {
}
return (
<div style={{ display: "flex", flexDirection: "column", gap: "10px", width: "100%" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ fontSize: "0.85rem", color: "var(--fg)" }}>
<div className="contribution-heatmap">
<div className="contribution-command-row">
<div className="contribution-command">
<span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--prettypurple)" }}>{totalContribs}</span> contributions in the last year&#34;
</div>
</div>
@ -149,15 +149,15 @@ export default function ContributionHeatmap() {
</div>
))}
</div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "0.75rem", color: "var(--gray)", marginTop: "4px" }}>
<div>
<div className="heatmap-status-row">
<div className="heatmap-status-text">
{hoveredCell ? (
<span><strong style={{ color: "var(--prettypurple)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
) : (
<span>Hover over a day to see contributions</span>
)}
</div>
<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
<div className="heatmap-legend">
<span>Less</span>
<div className="heatmap-legend-cell" data-level="0"></div>
<div className="heatmap-legend-cell" data-level="1"></div>
@ -169,8 +169,8 @@ export default function ContributionHeatmap() {
</div>
{activities.length > 0 && (
<div>
<div style={{ fontSize: "0.85rem", color: "var(--fg)", marginBottom: "4px" }}>
<div className="contribution-log">
<div className="contribution-command contribution-log-command">
<span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ git log -n 3 <span style={{ color: "var(--gray)" }}>#displays my 3 latest contributions</span>
</div>
{activities.map((act, idx) => {
@ -186,15 +186,17 @@ export default function ContributionHeatmap() {
}
} catch {}
const created = new Date(act.created);
return (
<div key={idx} style={{ display: "flex", flexDirection: "column", fontSize: "0.8rem", color: "var(--fg)" }}>
<div style={{ display: "flex", justifyContent: "space-between", color: "var(--white)" }}>
<span>repo: {act.repo?.full_name || "unknown"}</span>
<span style={{ color: "var(--green)", fontSize: "0.67rem" }}>
{new Date(act.created).toLocaleDateString()}-{new Date(act.created).toLocaleTimeString()}
<div key={idx} className="contribution-entry">
<div className="contribution-entry-header">
<span className="contribution-repo">repo: {act.repo?.full_name || "unknown"}</span>
<span className="contribution-date">
{created.toLocaleDateString()}-{created.toLocaleTimeString()}
</span>
</div>
<div style={{ color: "var(--gray)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
<div className="contribution-message">
{msg}
</div>
</div>