diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubbleCore/cards/message/PreviewRenderer.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubbleCore/cards/message/PreviewRenderer.tsx
index 3fa37a08d..3abcf6bdc 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewBubbleCore/cards/message/PreviewRenderer.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubbleCore/cards/message/PreviewRenderer.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
// External Packages
import { TwitterTweetEmbed } from 'react-twitter-embed';
+import styled from 'styled-components';
// Internal Compoonents
import { IFrame } from '../../../../../types';
@@ -11,9 +12,8 @@ import { checkTwitterUrl } from '../../../helpers/twitter';
import { FrameRenderer } from './FrameRenderer';
import { VideoRenderer } from './VideoRenderer';
-
// Internal Configs
-
+import { device } from '../../../../../config/globals';
// Assets
// Interfaces & Types
@@ -149,6 +149,31 @@ export const PreviewRenderer = ({
frameData={initialized.frameData}
/>
) : !initialized.loading && !initialized.error && initialized.url && initialized.urlType === 'twitter' ? (
-
+
+
+
) : null;
};
+
+const TwitterEmbedWrapper = styled.div`
+ width: 100%;
+ max-width: 550px;
+ margin: 0 auto;
+ overflow: hidden;
+ padding: 0 10px;
+ > div {
+ max-width: 100% !important;
+ }
+
+ iframe {
+ max-width: 100% !important;
+ }
+
+ @media (max-width: ${device.mobileL}) {
+ max-width: 100%;
+
+ iframe {
+ width: 100% !important;
+ }
+ }
+`;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubbleCore/cards/reply/ReplyCard.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubbleCore/cards/reply/ReplyCard.tsx
index 9171fef7b..cd4097825 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewBubbleCore/cards/reply/ReplyCard.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubbleCore/cards/reply/ReplyCard.tsx
@@ -17,6 +17,7 @@ import { CardRenderer } from '../../CardRenderer';
// Interfaces & Types
import { IMessagePayload } from '../../../exportedTypes';
+import { pCAIP10ToWallet, shortenText } from '../../../../../helpers';
// Constants
@@ -155,15 +156,13 @@ export const ReplyCard = ({
- {`${replyPayloadManager.payload.fromDID?.split(':')[1].slice(0, 6)}...${replyPayloadManager.payload.fromDID
- ?.split(':')[1]
- .slice(-6)}`}
+ {shortenText(pCAIP10ToWallet(replyPayloadManager.payload.fromDID), 6, true)}
-
)}
);
};
-const ReplySection = styled(Section) `
+const ReplySection = styled(Section)`
border-left: 4px solid ${({ borderBG }) => borderBG || 'transparent'};
`;