fix long displaynames/handles

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>

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

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>