fix style issue of reply placeholder (#2181)

diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 7687074e430498108fb626d70cc3a13b86284a69..a20ccb5c1e3d014e6d686d07251967f3ace93ad3 100644 (file)
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -21,7 +21,6 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
     <Box
       className={classNames(css.Reply, className)}
       alignItems="Center"
-      alignSelf="Start"
       gap="100"
       {...props}
       ref={ref}
@@ -38,7 +37,7 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
 );
 
 export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
-  <Box className={css.ThreadIndicator} alignItems="Center" alignSelf="Start" {...props} ref={ref}>
+  <Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}>
     <Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
     <Text size="T200">Threaded reply</Text>
   </Box>
@@ -74,7 +73,7 @@ export const Reply = as<'div', ReplyProps>(
     const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
     return (
-      <Box direction="Column" {...props} ref={ref}>
+      <Box direction="Column" alignItems="Start" {...props} ref={ref}>
         {threadRootId && (
           <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
         )}
@@ -100,7 +99,7 @@ export const Reply = as<'div', ReplyProps>(
               style={{
                 backgroundColor: color.SurfaceVariant.ContainerActive,
                 maxWidth: toRem(placeholderWidth),
-                width: '100%',
+                width: '100vw',
               }}
             />
           )}