Enhance video embedding and responsive styles for better layout on various screen sizes

Author: bibakroy

src/Content/Embed/EmbedVideo.tsx

@@ -104,9 +104,9 @@ function EmbedVideo(props: EmbedVideoProps) {
         width="100%"
         height="100%"
         style={{
-          height: adjustedHeight,
           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,12 @@ export const Embed = styled.withConfig({
       },
     },
   },
+  "@media (max-width: 413px)": {
+    maxWidth: "170px",
+  },
+  "@media (min-width: 414px) and (max-width: 833px)": {
+    maxWidth: "260px",
+  },
 });
 
 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: {
@@ -87,7 +88,9 @@ export const ContentContainer = styled.withConfig({
   },
   "@media (max-width: 413px)": {
     maxWidth: "160px",
-    wordBreak: "break-all"
+  },
+  "@media (min-width: 414px) and (max-width: 833px)": {
+    maxWidth: "290px",
   },
 });
 

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,9 @@ export const Message = styled.withConfig({
         },
       },
     },
+    "@media (max-width: 833px)": {
+      padding: `2px 10px 2px ${theme.sizes.messageLeftPadding}`,
+    },
   }
 );