From 25649bd718d97c44fb73e706790e4d004f6863d7 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 20 Mar 2025 19:37:44 +0200
Subject: [PATCH] fix long displaynames/handles

---
 bskyogcard/src/components/Post/index.tsx | 27 ++++++++++++------------
 bskyogcard/src/theme/atoms.ts            | 16 ++++++++++++++
 bskyogcard/test.html                     |  6 +++++-
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/bskyogcard/src/components/Post/index.tsx b/bskyogcard/src/components/Post/index.tsx
index 31128dbb71..9860edce69 100644
--- a/bskyogcard/src/components/Post/index.tsx
+++ b/bskyogcard/src/components/Post/index.tsx
@@ -70,22 +70,23 @@ export function Post({
             a.p_xl,
             a.rounded_md,
             t.atoms.bg,
-            {
-              boxShadow: `0 0 20px rgb(0, 25, 51, 0.2)`,
-            },
+            {boxShadow: `0 0 20px rgb(0, 25, 51, 0.2)`},
           ]}>
-          <Box cx={[a.flex_row, a.align_center, a.gap_sm, a.pb_sm]}>
-            <Avatar
-              size={42}
-              image={avatar}
-              profile={post.author}
-              moderatorData={moderatorData}
-            />
-            <Box cx={[a.flex_col]}>
-              <Text cx={[a.text_md, a.font_heavy, a.pb_2xs]}>
+          <Box cx={[a.flex_row, a.align_center, a.gap_sm, a.pb_sm, a.w_full]}>
+            <Box cx={[a.flex_shrink_0]}>
+              <Avatar
+                size={42}
+                image={avatar}
+                profile={post.author}
+                moderatorData={moderatorData}
+              />
+            </Box>
+            <Box cx={[a.flex_col, a.flex_1]}>
+              <Text cx={[a.text_md, a.font_heavy, a.pb_2xs, a.line_clamp_2]}>
                 {post.author.displayName || post.author.handle}
               </Text>
-              <Text cx={[a.text_sm, t.atoms.text_contrast_medium]}>
+              <Text
+                cx={[a.text_sm, t.atoms.text_contrast_medium, a.line_clamp_1]}>
                 {sanitizeHandle(post.author.handle, '@')}
               </Text>
             </Box>
diff --git a/bskyogcard/src/theme/atoms.ts b/bskyogcard/src/theme/atoms.ts
index 88bf5f7180..4902bc2267 100644
--- a/bskyogcard/src/theme/atoms.ts
+++ b/bskyogcard/src/theme/atoms.ts
@@ -32,6 +32,22 @@ export const atoms = {
   overflow_hidden: {
     overflow: 'hidden',
   },
+  line_clamp_1: {
+    display: 'block',
+    lineClamp: 1,
+  },
+  line_clamp_2: {
+    display: 'block',
+    lineClamp: 2,
+  },
+  line_clamp_3: {
+    display: 'block',
+    lineClamp: 3,
+  },
+  line_clamp_4: {
+    display: 'block',
+    lineClamp: 4,
+  },
 
   /*
    * Width
diff --git a/bskyogcard/test.html b/bskyogcard/test.html
index e09b3b23a8..d09e192dc9 100644
--- a/bskyogcard/test.html
+++ b/bskyogcard/test.html
@@ -84,9 +84,13 @@
       <h3>Blocked</h3>
       <img src="http://localhost:3000/profile/test-all-embeds-a.bsky.social/post/3lkcikkheys2c?mat=1" />
 
-      <h1>Labelers</h1>
+      <h1>Misc</h1>
       <h3>Post from labeler</h3>
       <img src="http://localhost:3000/profile/xblock.aendra.dev/post/3ljo3ne5cxk2h?mat=1" />
+      <h3>Long name</h3>
+      <img src="http://localhost:3000/profile/hailey5.bsky.social/post/3kl4psn4zbk2q?mat=1" />
+      <h3>Long handle</h3>
+      <img src="http://localhost:3000/profile/deepfates.com.deepfates.com.deepfates.com.deepfates.com.deepfates.com/post/3jvcrxfpuhy2i?mat=1" />
     </div>
   </body>
 </html>