From 2a6d04e6e203430fad61ed87cbbfa8e6836e70a5 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:37:41 -0700
Subject: feat: update ProfileCard.Avatar to take size prop

---
 src/components/ProfileCard.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'src/components/ProfileCard.tsx')

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index e01c27655..b2d4d16fb 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -20,7 +20,13 @@ import {useProfileFollowMutationQueue} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {PreviewableUserAvatar, UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, platform, useTheme} from '#/alf'
+import {
+  atoms as a,
+  platform,
+  TextStyleProp,
+  useTheme,
+  ViewStyleProp,
+} from '#/alf'
 import {
   Button,
   ButtonIcon,
@@ -136,12 +142,14 @@ export function Avatar({
   onPress,
   disabledPreview,
   liveOverride,
+  size = 40,
 }: {
   profile: bsky.profile.AnyProfileView
   moderationOpts: ModerationOpts
   onPress?: () => void
   disabledPreview?: boolean
   liveOverride?: boolean
+  size?: number
 }) {
   const moderation = moderateProfile(profile, moderationOpts)
 
@@ -149,7 +157,7 @@ export function Avatar({
 
   return disabledPreview ? (
     <UserAvatar
-      size={40}
+      size={size}
       avatar={profile.avatar}
       type={profile.associated?.labeler ? 'labeler' : 'user'}
       moderation={moderation.ui('avatar')}
@@ -157,7 +165,7 @@ export function Avatar({
     />
   ) : (
     <PreviewableUserAvatar
-      size={40}
+      size={size}
       profile={profile}
       moderation={moderation.ui('avatar')}
       onBeforePress={onPress}
-- 
cgit 1.4.1


From ff4eecc2e4c485c5fddf763008bf46b0148eac0a Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:38:10 -0700
Subject: feat: update ProfileCard.Description to take style prop

---
 src/components/ProfileCard.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components/ProfileCard.tsx')

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index b2d4d16fb..4e135c8a2 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -354,10 +354,11 @@ export function NameAndHandlePlaceholder() {
 export function Description({
   profile: profileUnshadowed,
   numberOfLines = 3,
+  style,
 }: {
   profile: bsky.profile.AnyProfileView
   numberOfLines?: number
-}) {
+} & TextStyleProp) {
   const profile = useProfileShadow(profileUnshadowed)
   const rt = useMemo(() => {
     if (!('description' in profile)) return
@@ -377,7 +378,7 @@ export function Description({
     <View style={[a.pt_xs]}>
       <RichText
         value={rt}
-        style={[a.leading_snug]}
+        style={[a.leading_snug, style]}
         numberOfLines={numberOfLines}
         disableLinks
       />
-- 
cgit 1.4.1


From 87f2bc5be3b082d6dfb79108e688f9402ca7c996 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 17:18:59 -0700
Subject: feat: create NamePlaceholder component

---
 src/components/ProfileCard.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

(limited to 'src/components/ProfileCard.tsx')

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 4e135c8a2..99a68083a 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -23,9 +23,9 @@ import {PreviewableUserAvatar, UserAvatar} from '#/view/com/util/UserAvatar'
 import {
   atoms as a,
   platform,
-  TextStyleProp,
+  type TextStyleProp,
   useTheme,
-  ViewStyleProp,
+  type ViewStyleProp,
 } from '#/alf'
 import {
   Button,
@@ -351,6 +351,24 @@ export function NameAndHandlePlaceholder() {
   )
 }
 
+export function NamePlaceholder({style}: ViewStyleProp) {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[
+        a.rounded_xs,
+        t.atoms.bg_contrast_25,
+        {
+          width: '60%',
+          height: 14,
+        },
+        style,
+      ]}
+    />
+  )
+}
+
 export function Description({
   profile: profileUnshadowed,
   numberOfLines = 3,
-- 
cgit 1.4.1


From 4e507caa7c5c11c41d44364270180fb4186235d1 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 17:19:13 -0700
Subject: feat: update AvatarPlaceholder to take size prop

---
 src/components/ProfileCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/ProfileCard.tsx')

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 99a68083a..65e20ba9a 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -174,7 +174,7 @@ export function Avatar({
   )
 }
 
-export function AvatarPlaceholder() {
+export function AvatarPlaceholder({size = 40}: {size?: number}) {
   const t = useTheme()
   return (
     <View
@@ -182,8 +182,8 @@ export function AvatarPlaceholder() {
         a.rounded_full,
         t.atoms.bg_contrast_25,
         {
-          width: 40,
-          height: 40,
+          width: size,
+          height: size,
         },
       ]}
     />
-- 
cgit 1.4.1


From 8dc074c47798f69d886ed6eec7b8cb01171aced8 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Mon, 28 Jul 2025 17:38:58 -0700
Subject: fix(ui): profile name and description overflowing on web

---
 src/components/FeedInterstitials.tsx | 2 +-
 src/components/ProfileCard.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/ProfileCard.tsx')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 6cb10a523..1566db1bf 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -313,7 +313,7 @@ export function ProfileGrid({
                     moderationOpts={moderationOpts}
                     size={88}
                   />
-                  <View style={[a.flex_col, a.align_center]}>
+                  <View style={[a.flex_col, a.align_center, a.max_w_full]}>
                     <ProfileCard.Name
                       profile={profile}
                       moderationOpts={moderationOpts}
diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 65e20ba9a..f12d922fd 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -282,7 +282,7 @@ export function Name({
   )
   const verification = useSimpleVerificationState({profile})
   return (
-    <View style={[a.flex_row, a.align_center]}>
+    <View style={[a.flex_row, a.align_center, a.max_w_full]}>
       <Text
         emoji
         style={[
-- 
cgit 1.4.1