Align avatar in reply prompt (#8501)

* align avi in reply prompt

* update skellie

1 files changed, 6 insertions, 17 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>
   )