fix: timer alignment for data extraction notifications

ts/components/conversation/message/message-item/DataExtractionNotification.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import { PropsForDataExtractionNotification } from '../../../../models/messageType';
 import { SignalService } from '../../../../protobuf';
 import { Flex } from '../../../basic/Flex';
@@ -6,6 +7,10 @@ import { SpacerSM, Text } from '../../../basic/Text';
 import { SessionIcon } from '../../../icon';
 import { ExpirableReadableMessage } from './ExpirableReadableMessage';
 
+const StyledDataExtractionNotificationContainer = styled.div`
+  padding: 0 var(--margins-lg) 0;
+`;
+
 export const DataExtractionNotification = (props: PropsForDataExtractionNotification) => {
   const { name, type, source, messageId } = props;
 
@@ -17,23 +22,29 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
   }
 
   return (
-    <ExpirableReadableMessage messageId={messageId} key={`readable-message-${messageId}`}>
-      <Flex
-        container={true}
-        flexDirection="column"
-        alignItems="center"
-        justifyContent="center"
-        width="90%"
-        maxWidth="700px"
-        margin="10px auto"
-        padding="5px 10px"
-        id={`msg-${messageId}`}
-        style={{ textAlign: 'center' }}
+    <StyledDataExtractionNotificationContainer>
+      <ExpirableReadableMessage
+        messageId={messageId}
+        key={`readable-message-${messageId}`}
+        isCentered
       >
-        <SessionIcon iconType="save" iconColor="inherit" iconSize="large" />
-        <SpacerSM />
-        <Text text={contentText} ellipsisOverflow={true} />
-      </Flex>
-    </ExpirableReadableMessage>
+        <Flex
+          container={true}
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          width="90%"
+          maxWidth="700px"
+          margin="10px auto"
+          padding="5px 10px"
+          id={`msg-${messageId}`}
+          style={{ textAlign: 'center' }}
+        >
+          <SessionIcon iconType="save" iconColor="inherit" iconSize="large" />
+          <SpacerSM />
+          <Text text={contentText} ellipsisOverflow={true} />
+        </Flex>
+      </ExpirableReadableMessage>
+    </StyledDataExtractionNotificationContainer>
   );
 };