Merge pull request #1414 from saithsab877/fix/chat-status-display-positioning

Status UI component moved between Chat History and Chat Box for clear separation

Author: humansinstitute

src/people/hiveChat/ChatStatusDisplay.tsx

@@ -12,7 +12,6 @@ const StatusContainer = styled.div<{ isError: boolean }>`
   align-items: center;
   border-radius: 8px;
   margin-top: auto;
-  margin-bottom: 10px;
   box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
 `;
 

src/people/hiveChat/index.tsx

@@ -182,6 +182,10 @@ const ChatHistory = styled.div`
   position: relative;
 `;
 
+const StatusWrapper = styled.div`
+  margin-top: 20px;
+`;
+
 const SplashContainer = styled.div`
   position: absolute;
   top: 50%;
@@ -1633,9 +1637,14 @@ export const HiveChatView: React.FC = observer(() => {
                     </p>
                   </MessageBubble>
                 )}
-
-                {chatStatus && <ChatStatusDisplay chatStatus={chatStatus} />}
               </ChatHistory>
+
+              {chatStatus && (
+                <StatusWrapper>
+                  <ChatStatusDisplay chatStatus={chatStatus} />
+                </StatusWrapper>
+              )}
+
               <InputContainer>
                 <TextArea
                   value={message}