Refactor responsive styles for embed and message components to improve layout on small screens

Author: bibakroy

src/Content/Embed/style.ts

@@ -28,11 +28,14 @@ export const Embed = styled.withConfig({
       },
     },
   },
-  "@media (max-width: 413px)": {
-    maxWidth: "170px",
+  "@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: "260px",
+    maxWidth: "65vw",
   },
 });
 

src/Message/style/message.ts

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