From 6a277207092893f19f21f52c919c1084f31cf865 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 4 Aug 2025 20:34:01 +0530
Subject: [PATCH] Improve thread reply layout (#2410)

---
 src/app/components/message/Reply.css.ts |  6 ------
 src/app/components/message/Reply.tsx    | 15 +++++++++++----
 src/app/features/room/RoomInput.tsx     |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/app/components/message/Reply.css.ts b/src/app/components/message/Reply.css.ts
index 06799391..7e5540fd 100644
--- a/src/app/components/message/Reply.css.ts
+++ b/src/app/components/message/Reply.css.ts
@@ -7,7 +7,6 @@ export const ReplyBend = style({
 
 export const ThreadIndicator = style({
   opacity: config.opacity.P300,
-  gap: toRem(2),
 
   selectors: {
     'button&': {
@@ -19,11 +18,6 @@ export const ThreadIndicator = style({
   },
 });
 
-export const ThreadIndicatorIcon = style({
-  width: toRem(14),
-  height: toRem(14),
-});
-
 export const Reply = style({
   marginBottom: toRem(1),
   minWidth: 0,
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 563d1bf8..dc92bf83 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -38,9 +38,16 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
 );
 
 export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
-  <Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}>
-    <Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
-    <Text size="T200">Threaded reply</Text>
+  <Box
+    shrink="No"
+    className={css.ThreadIndicator}
+    alignItems="Center"
+    gap="100"
+    {...props}
+    ref={ref}
+  >
+    <Icon size="50" src={Icons.Thread} />
+    <Text size="L400">Thread</Text>
   </Box>
 ));
 
@@ -97,7 +104,7 @@ export const Reply = as<'div', ReplyProps>(
     const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
     return (
-      <Box direction="Column" alignItems="Start" {...props} ref={ref}>
+      <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
         {threadRootId && (
           <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
         )}
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 501ee0dc..1399ec15 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -543,7 +543,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   >
                     <Icon src={Icons.Cross} size="50" />
                   </IconButton>
-                  <Box direction="Column">
+                  <Box direction="Row" gap="200" alignItems="Center">
                     {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                     <ReplyLayout
                       userColor={replyUsernameColor}