Align avatar in reply prompt (#8501)

* align avi in reply prompt

* update skellie

2 files changed, 10 insertions, 26 deletions

diff --git a/src/screens/PostThread/components/ThreadItemReplyComposer.tsx b/src/screens/PostThread/components/ThreadItemReplyComposer.tsx
index f1862569e..d93612be8 100644
--- a/src/screens/PostThread/components/ThreadItemReplyComposer.tsx
+++ b/src/screens/PostThread/components/ThreadItemReplyComposer.tsx
@@ -1,30 +1,19 @@
 import {View} from 'react-native'
 
-import {OUTER_SPACE} from '#/screens/PostThread/const'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Skele from '#/components/Skeleton'
 
-/*
- * Wacky padding here is just replicating what we have in the actual
- * `PostThreadComposePrompt` component
- */
 export function ThreadItemReplyComposerSkeleton() {
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
 
+  if (!gtMobile) return null
+
   return (
-    <View
-      style={[
-        a.border_t,
-        t.atoms.border_contrast_low,
-        gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11},
-        {
-          paddingHorizontal: OUTER_SPACE,
-        },
-      ]}>
-      <View style={[a.flex_row, a.align_center, a.gap_xs, a.py_sm]}>
-        <Skele.Circle size={gtMobile ? 24 : 22} />
-        <Skele.Text style={[a.text_md]} />
+    <View style={[a.px_sm, a.py_xs, a.border_t, t.atoms.border_contrast_low]}>
+      <View style={[a.flex_row, a.align_center, a.gap_sm, a.px_sm, a.py_sm]}>
+        <Skele.Circle size={24} />
+        <Skele.Text style={[a.text_md, {maxWidth: 119}]} />
       </View>
     </View>
   )
diff --git a/src/view/com/post-thread/PostThreadComposePrompt.tsx b/src/view/com/post-thread/PostThreadComposePrompt.tsx
index f45b16085..dc0561725 100644
--- a/src/view/com/post-thread/PostThreadComposePrompt.tsx
+++ b/src/view/com/post-thread/PostThreadComposePrompt.tsx
@@ -38,15 +38,10 @@ export function PostThreadComposePrompt({
   return (
     <View
       style={[
+        a.px_sm,
         gtMobile
-          ? [
-              a.py_xs,
-              a.px_sm,
-              a.border_t,
-              t.atoms.border_contrast_low,
-              t.atoms.bg,
-            ]
-          : [a.px_md, a.pb_2xs],
+          ? [a.py_xs, a.border_t, t.atoms.border_contrast_low, t.atoms.bg]
+          : [a.pb_2xs],
         style,
       ]}>
       {!gtMobile && (
@@ -87,7 +82,7 @@ export function PostThreadComposePrompt({
           a.transition_color,
         ]}>
         <UserAvatar
-          size={gtMobile ? 24 : 22}
+          size={24}
           avatar={profile?.avatar}
           type={profile?.associated?.labeler ? 'labeler' : 'user'}
         />