[FR-305] Fix: Embeds are not properly responsive

src/Content/Attachment/style.ts

@@ -21,6 +21,9 @@ export const ImageAttachment = styled.withConfig({
       },
     },
   },
+  "@media (max-width: 413px)": {
+    maxWidth: "60vw",
+  },
 });
 
 export const LazyImagePlaceholder = styled.withConfig({
@@ -318,6 +321,7 @@ export const AttachmentContainer = styled.withConfig({
   borderRadius: 3,
   width: "fit-content",
   flexWrap: "wrap",
+  position: "relative",
 
   variants: {
     withoutChildren: {
@@ -351,6 +355,9 @@ export const AttachmentFileName = styled.withConfig({
   "&:hover": {
     textDecoration: "underline",
   },
+  "@media (max-width: 339px)": {
+    maxWidth: "35vw",
+  },
 });
 
 export const AttachmentFileSize = styled.withConfig({
@@ -373,6 +380,12 @@ export const DownloadIcon = styled.withConfig({
   "&:hover": {
     opacity: 1,
   },
+  "@media (max-width: 339px)": {
+    position: "absolute",
+    right: 2,
+    top: 10,
+    marginLeft: 0,
+  },
 });
 
 export const ExtraUserInterface = styled.withConfig({
@@ -382,6 +395,10 @@ export const ExtraUserInterface = styled.withConfig({
   flexBasis: "100%",
   marginTop: theme.space.large,
   display: "flex",
+  "@media (max-width: 339px)": {
+    marginTop: "10px",
+    maxWidth: "55vw",
+  },
 });
 
 export const AttachmentAudioControls = styled.withConfig({
@@ -393,4 +410,7 @@ export const AttachmentAudioControls = styled.withConfig({
   outline: "none",
   borderRadius: 3,
   maxWidth: "70vw",
+  "@media (max-width: 433px)": {
+    maxWidth: "60vw"
+  }
 });

src/Content/Embed/EmbedVideo.tsx

@@ -37,11 +37,13 @@ function ThumbnailWrapper({
       onClick={() => setHideThumbnail(true)}
       onError={() => setError(true)}
       style={{
-        width: adjustedWidth,
-        height: adjustedHeight,
-        backgroundImage: `url(${error ? discordImageFailure : thumbnail})`,
+        width: "100%",
+        height: "auto",
+        maxWidth: adjustedWidth,
+        maxHeight: adjustedHeight,
       }}
     >
+      <Styles.Image src={error ? discordImageFailure : thumbnail} />
       <Styles.VideoThumbnailPlayButtonContainer>
         <Styles.VideoThumbnailPlayButton
           width={12}
@@ -61,6 +63,11 @@ interface EmbedVideoProps
 }
 
 function EmbedVideo(props: EmbedVideoProps) {
+  const { width: adjustedWidth, height: adjustedHeight } = useSize(
+    props.width,
+    props.height
+  );
+
   if (props.proxyUrl)
     return (
       <ThumbnailWrapper
@@ -94,8 +101,13 @@ function EmbedVideo(props: EmbedVideoProps) {
       height={props.height}
     >
       <Styles.VideoIframe
-        width={400}
-        height={225}
+        width="100%"
+        height="100%"
+        style={{
+          maxWidth: adjustedWidth,
+          maxHeight: adjustedHeight,
+          aspectRatio:"16 / 9"
+        }}
         src={url.toString()}
         allowFullScreen={true}
       />

src/Content/Embed/index.tsx

@@ -14,6 +14,7 @@ import ExternalLink from "../../ExternalLink";
 import { error } from "../../utils/error";
 import useSize from "src/Content/Embed/useSize";
 
+// const MAX_IMAGES = 1;
 export interface EmbedProps {
   embed: APIEmbed;
   images: APIEmbedImage[] | undefined;
@@ -148,13 +149,18 @@ function Embed({ embed, images }: EmbedProps) {
         />
       )}
       {images && images.length > 0 && (
-        <Styles.Images nImages={images.length as 1 | 2 | 3 | 4}>
-          {images.map((image) => (
-            <Styles.ImageGridImageContainer key={image.url}>
-              <EmbeddedImage embedImage={image} withMargin />
-            </Styles.ImageGridImageContainer>
-          ))}
-        </Styles.Images>
+        // <Styles.Images nImages={images.length}>
+        //   {images.slice(0, MAX_IMAGES).map((image) => (
+        //     <Styles.ImageGridImageContainer key={image.url}>
+        //       <EmbeddedImage embedImage={image} withMargin
+        //   width={embed.image.width}
+        //   height={embed.image.height}  />
+        //     </Styles.ImageGridImageContainer>
+        //   ))}
+        // </Styles.Images>
+        <EmbeddedImage embedImage={images[0]} withMargin
+          width={images[0].width}
+          height={images[0].height}  />
       )}
 
       {(embed.footer || embed.timestamp) && (

src/Content/Embed/style.ts

@@ -28,6 +28,15 @@ export const Embed = styled.withConfig({
       },
     },
   },
+  "@media (max-width: 319px)": {
+    maxWidth: "45vw",
+  },
+  "@media (min-width: 320px) and (max-width: 413px)": {
+    maxWidth: "55vw",
+  },
+  "@media (min-width: 414px) and (max-width: 833px)": {
+    maxWidth: "65vw",
+  },
 });
 
 export const ContentAndThumbnail = styled.withConfig({

src/Content/style.ts

@@ -60,6 +60,7 @@ export const ContentContainer = styled.withConfig({
   color: theme.colors.primaryOpacity80,
   fontWeight: 400,
   lineHeight: "1.375rem",
+  wordBreak: "break-all",
 
   variants: {
     didFailToSend: {
@@ -85,6 +86,12 @@ export const ContentContainer = styled.withConfig({
       },
     },
   },
+  "@media (max-width: 413px)": {
+    maxWidth: "160px",
+  },
+  "@media (min-width: 414px) and (max-width: 833px)": {
+    maxWidth: "290px",
+  },
 });
 
 export const ReplyAccessoryText = styled.withConfig({

src/Message/Components/style.ts

@@ -86,5 +86,6 @@ export const ActionRow = styled.withConfig({
 })("div", {
   display: "flex",
   flexDirection: "row",
+  flexWrap: "wrap",
   gap: theme.space.large,
 });

src/Message/style/author.ts

@@ -9,6 +9,7 @@ export const MessageAuthor = styled.withConfig({
   componentId: commonComponentId,
 })("span", {
   display: "inline-flex",
+  wordBreak: "break-all",
 
   variants: {
     clickable: {
@@ -19,6 +20,9 @@ export const MessageAuthor = styled.withConfig({
       },
     },
   },
+  "@media (max-width: 319px)": {
+    flexWrap: 'wrap'
+  },
 });
 
 export const Username = styled.withConfig({
@@ -30,7 +34,6 @@ export const Username = styled.withConfig({
   fontSize: theme.fontSizes.l,
   display: "inline",
   verticalAlign: "baseline",
-  whiteSpace: "nowrap",
   lineHeight: `1.375rem`,
 
   variants: {
@@ -64,7 +67,10 @@ export const Avatar = styled.withConfig({
   transform: "translateX(-50%)",
   marginTop: "calc(4px - .125rem)",
   zIndex: 1,
-});
+  "@media (max-width: 319px)": {
+    left: `calc(${theme.sizes.messageLeftPadding} / 3)`,
+  }
+},);
 
 export const StillAvatar = styled.withConfig({
   displayName: "message-author-still-avatar",

src/Message/style/message.ts

@@ -83,6 +83,13 @@ export const Message = styled.withConfig({
         },
       },
     },
+    "@media (max-width: 319px)": {
+      paddingRight: `0px`,
+      paddingLeft: `calc(${theme.sizes.messageLeftPadding} - 15px)`,
+    },
+    "@media (min-width: 320px) and (max-width: 833px)": {
+      paddingRight: `8px`,
+    },
   }
 );
 

src/stories/Wrapper.tsx

@@ -368,7 +368,7 @@ const StorybookStyles = styled("div", {
   [`--${prefix}-fonts-main`]:
     '"gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif',
   fontFamily: theme.fonts.main,
-  padding: 40,
+  padding: "40px 0px",
 });
 
 // eslint-disable-next-line func-style