From 6a27cd259b67bdad85e8d82a31543cc11c309fc6 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 24 Apr 2026 20:15:11 +0200
Subject: [PATCH] ogre/footer: use char-length thresholds to hide stats on long
 handles

Signed-off-by: eti <eti@eti.tf>
---
 ogre/src/__tests__/fixtures.ts              |  2 +
 ogre/src/__tests__/render.test.ts           |  8 +-
 ogre/src/components/cards/issue.tsx         |  4 +-
 ogre/src/components/shared/footer-stats.tsx | 98 +++++++++------------
 4 files changed, 51 insertions(+), 61 deletions(-)

diff --git a/ogre/src/__tests__/fixtures.ts b/ogre/src/__tests__/fixtures.ts
index eae8a2b4..440aa1fd 100644
--- a/ogre/src/__tests__/fixtures.ts
+++ b/ogre/src/__tests__/fixtures.ts
@@ -89,3 +89,5 @@ export const createLongTitlePullRequestData = (
   title: LONG_TITLE,
   ...overrides,
 });
+
+
diff --git a/ogre/src/__tests__/render.test.ts b/ogre/src/__tests__/render.test.ts
index 19bfa699..90609945 100644
--- a/ogre/src/__tests__/render.test.ts
+++ b/ogre/src/__tests__/render.test.ts
@@ -87,9 +87,9 @@ describe("issue cards", () => {
     await renderAndSave(h(IssueCard, validated), "issue-card-long-title.png");
   });
 
-  test("renders issue with long author handle (reactions hidden)", async () => {
+  test("renders issue with long author handle", async () => {
     const data = createIssueData(avatarDataUri, {
-      authorHandle: "extremely-long-handle.example.com",
+      authorHandle: "very.very.long.tangled.org",
     });
     const validated = issueCardSchema.parse(data);
     await renderAndSave(
@@ -146,9 +146,9 @@ describe("pull request cards", () => {
     );
   });
 
-  test("renders pull request with long author handle (reactions hidden)", async () => {
+  test("renders pull request with long author handle", async () => {
     const data = createPullRequestData(avatarDataUri, {
-      authorHandle: "extremely-long-handle.example.com",
+      authorHandle: "very.very.long.tangled.org",
     });
     const validated = pullRequestCardSchema.parse(data);
     await renderAndSave(
diff --git a/ogre/src/components/cards/issue.tsx b/ogre/src/components/cards/issue.tsx
index e6d160f1..4710f59b 100644
--- a/ogre/src/components/cards/issue.tsx
+++ b/ogre/src/components/cards/issue.tsx
@@ -37,8 +37,8 @@ export function IssueCard(data: IssueCardData) {
 
       <Row
         style={{
-          alignItems: "flex-end",
-          justifyContent: "space-between",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
         }}>
         <FooterStats
           createdAt={data.createdAt}
diff --git a/ogre/src/components/shared/footer-stats.tsx b/ogre/src/components/shared/footer-stats.tsx
index d7bb4978..05f63dee 100644
--- a/ogre/src/components/shared/footer-stats.tsx
+++ b/ogre/src/components/shared/footer-stats.tsx
@@ -4,67 +4,55 @@ import { StatItem } from "./stat-item";
 import { Avatar } from "./avatar";
 import { TYPOGRAPHY } from "./constants";
 
-// Handles longer than this cause the footer to overflow when combined with
-// other stats, so we drop the less-important reaction count first, then the
-// comment count once the handle grows longer still.
-const LONG_HANDLE_THRESHOLD = 20;
-const VERY_LONG_HANDLE_THRESHOLD = 28;
-
 interface FooterStatsProps {
-  createdAt: string;
-  authorHandle?: string;
-  authorAvatarUrl?: string;
-  reactionCount?: number;
-  commentCount?: number;
+    createdAt: string;
+    authorHandle?: string;
+    authorAvatarUrl?: string;
+    reactionCount?: number;
+    commentCount?: number;
 }
 
 export function FooterStats({
-  createdAt,
-  authorHandle,
-  authorAvatarUrl,
-  reactionCount,
-  commentCount,
+    createdAt,
+    authorHandle,
+    authorAvatarUrl,
+    reactionCount,
+    commentCount,
 }: FooterStatsProps) {
-  const formattedDate = new Intl.DateTimeFormat("en-GB", {
-    day: "numeric",
-    month: "short",
-    year: "numeric",
-  }).format(new Date(createdAt));
+    const formattedDate = new Intl.DateTimeFormat("en-GB", {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+    }).format(new Date(createdAt));
 
-  const handleLength = authorHandle?.length ?? 0;
-  // Long handles crowd the footer. Drop reactions first; drop comments too
-  // for extremely long handles to prevent overflow past the tangled logo.
-  const isLongHandle = handleLength > LONG_HANDLE_THRESHOLD;
-  const isVeryLongHandle = handleLength > VERY_LONG_HANDLE_THRESHOLD;
-  const gap = isLongHandle ? 40 : 64;
-  const hideReactions = isLongHandle;
-  const hideComments = isVeryLongHandle;
+    const handleLength = authorHandle?.length ?? 0;
+    const showReactions = handleLength <= 16;
+    const showComments = handleLength <= 11;
 
-  return (
-    <Row style={{ gap }}>
-      {authorHandle && authorAvatarUrl ? (
-        <Row style={{ gap: 16, alignItems: "center" }}>
-          <Avatar src={authorAvatarUrl} size={40} />
-          <span
-            style={{
-              ...TYPOGRAPHY.body,
-              color: "#404040",
-              maxWidth: 480,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }}>
-            {authorHandle}
-          </span>
+    return (
+        <Row style={{ gap: 40 }}>
+            {authorHandle && authorAvatarUrl ? (
+                <Row style={{ gap: 16, alignItems: "center" }}>
+                    <Avatar src={authorAvatarUrl} size={40} />
+                    <span
+                        style={{
+                            ...TYPOGRAPHY.body,
+                            color: "#404040",
+                            maxWidth: 400,
+                            lineClamp: 1,
+                            display: "block",
+                        }}>
+                        {authorHandle}
+                    </span>
+                </Row>
+            ) : null}
+            <StatItem Icon={Calendar} value={formattedDate} />
+            {showReactions && reactionCount ? (
+                <StatItem Icon={SmilePlus} value={reactionCount} />
+            ) : null}
+            {showComments && commentCount ? (
+                <StatItem Icon={MessageSquare} value={commentCount} />
+            ) : null}
         </Row>
-      ) : null}
-      <StatItem Icon={Calendar} value={formattedDate} />
-      {reactionCount && !hideReactions ? (
-        <StatItem Icon={SmilePlus} value={reactionCount} />
-      ) : null}
-      {commentCount && !hideComments ? (
-        <StatItem Icon={MessageSquare} value={commentCount} />
-      ) : null}
-    </Row>
-  );
+    );
 }
-- 
2.51.2