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

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

@@ -148,13 +148,21 @@ 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.map((image) => (
+        //     <Styles.ImageGridImageContainer key={image.url}>
+        //       <EmbeddedImage embedImage={image} withMargin />
+        //     </Styles.ImageGridImageContainer>
+        //   ))}
+        // </Styles.Images>
+        <EmbeddedImage
+          embedImage={images[0]}
+          withMargin
+          image={images[0]}
+          width={images[0].width}
+          height={images[0].height}
+          type="EmbedImage"
+        />
       )}
 
       {(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/message.ts

@@ -83,6 +83,12 @@ export const Message = styled.withConfig({
         },
       },
     },
+    "@media (max-width: 319px)": {
+      paddingRight: `0px`,
+    },
+    "@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