ogre/footer-stats: progressively hide footer items on long handles #8

When the author handle is very long, the footer overflows past the Tangled logo on issue/PR OG images. The existing two thresholds (hide reactions at >20 chars, hide comments at >28 chars) were insufficient because even with only avatar + username + date visible, the layout could exceed the available 848px.

Add a third threshold (>40 chars) that also hides the date, and reduce username maxWidth from 480 to 440 for the 29-40 char range.

Signed-off-by: eti eti@eti.tf

+50 -4

3 changed files

Diff round #0

expand all

ogre

src

__tests__

fixtures.ts

render.test.ts

components

shared

footer-stats.tsx

+18

ogre/src/__tests__/fixtures.ts

··· 89 89 title: LONG_TITLE, 90 90 ...overrides, 91 91 }); 92 + 93 + export const createExtremeHandleIssueData = ( 94 + avatarUrl: string, 95 + overrides?: Partial<IssueCardData>, 96 + ): IssueCardData => ({ 97 + ...createIssueData(avatarUrl), 98 + authorHandle: "some-very-long-username-here.with.a.long.domain", 99 + ...overrides, 100 + }); 101 + 102 + export const createExtremeHandlePullRequestData = ( 103 + avatarUrl: string, 104 + overrides?: Partial<PullRequestCardData>, 105 + ): PullRequestCardData => ({ 106 + ...createPullRequestData(avatarUrl), 107 + authorHandle: "some-very-long-username-here.with.a.long.domain", 108 + ...overrides, 109 + });

+20

ogre/src/__tests__/render.test.ts

··· 17 17 createPullRequestData, 18 18 createLongTitleIssueData, 19 19 createLongTitlePullRequestData, 20 + createExtremeHandleIssueData, 21 + createExtremeHandlePullRequestData, 20 22 } from "./fixtures"; 21 23 22 24 const outputDir = join(process.cwd(), "output"); ··· 97 99 "issue-card-long-handle.png", 98 100 ); 99 101 }); 102 + 103 + test("renders issue with extreme author handle (date hidden)", async () => { 104 + const data = createExtremeHandleIssueData(avatarDataUri); 105 + const validated = issueCardSchema.parse(data); 106 + await renderAndSave( 107 + h(IssueCard, validated), 108 + "issue-card-extreme-handle.png", 109 + ); 110 + }); 100 111 }); 101 112 102 113 describe("pull request cards", () => { ··· 156 167 "pull-request-card-long-handle.png", 157 168 ); 158 169 }); 170 + 171 + test("renders pull request with extreme author handle (date hidden)", async () => { 172 + const data = createExtremeHandlePullRequestData(avatarDataUri); 173 + const validated = pullRequestCardSchema.parse(data); 174 + await renderAndSave( 175 + h(PullRequestCard, validated), 176 + "pull-request-card-extreme-handle.png", 177 + ); 178 + }); 159 179 });

+12 -4

ogre/src/components/shared/footer-stats.tsx

··· 9 9 // comment count once the handle grows longer still. 10 10 const LONG_HANDLE_THRESHOLD = 20; 11 11 const VERY_LONG_HANDLE_THRESHOLD = 28; 12 + const EXTREME_HANDLE_THRESHOLD = 40; 12 13 13 14 interface FooterStatsProps { 14 15 createdAt: string; ··· 32 33 }).format(new Date(createdAt)); 33 34 34 35 const handleLength = authorHandle?.length ?? 0; 35 - // Long handles crowd the footer. Drop reactions first; drop comments too 36 - // for extremely long handles to prevent overflow past the tangled logo. 37 36 const isLongHandle = handleLength > LONG_HANDLE_THRESHOLD; 38 37 const isVeryLongHandle = handleLength > VERY_LONG_HANDLE_THRESHOLD; 38 + const isExtremeHandle = handleLength > EXTREME_HANDLE_THRESHOLD; 39 + 40 + // Progressively drop less important items as the handle gets longer: 41 + // ≤20 chars — show everything, generous gap 42 + // 21-28 chars — hide reactions, tighter gap 43 + // 29-40 chars — also hide comments, reduce username maxWidth 44 + // >40 chars — also hide the date, give username more room 39 45 const gap = isLongHandle ? 40 : 64; 40 46 const hideReactions = isLongHandle; 41 47 const hideComments = isVeryLongHandle; 48 + const hideDate = isExtremeHandle; 49 + const nameMaxWidth = isExtremeHandle ? 700 : isVeryLongHandle ? 440 : 480; 42 50 43 51 return ( 44 52 <Row style={{ gap }}> ··· 49 57 style={{ 50 58 ...TYPOGRAPHY.body, 51 59 color: "#404040", 52 - maxWidth: 480, 60 + maxWidth: nameMaxWidth, 53 61 overflow: "hidden", 54 62 textOverflow: "ellipsis", 55 63 whiteSpace: "nowrap", ··· 58 66 </span> 59 67 </Row> 60 68 ) : null} 61 - <StatItem Icon={Calendar} value={formattedDate} /> 69 + {!hideDate && <StatItem Icon={Calendar} value={formattedDate} />} 62 70 {reactionCount && !hideReactions ? ( 63 71 <StatItem Icon={SmilePlus} value={reactionCount} /> 64 72 ) : null}

History

2 rounds 0 comments

eti.tf submitted #1 2d

diff interdiff

1 commit

expand

3b54d6db

ogre/footer: use char-length thresholds to hide stats on long handles

merge conflicts detected

expand

ogre/src/__tests__/fixtures.ts:89
ogre/src/__tests__/render.test.ts:87
ogre/src/components/cards/issue.tsx:37
ogre/src/components/shared/footer-stats.tsx:4

expand 0 comments

eti.tf submitted #0 2d

1 commit

expand

a430bfa1

ogre/footer-stats: progressively hide footer items on long handles

expand 0 comments

Configure Feed

Configure Feed

History