From 6a5a18e3a4cba10e87e92858bc491c38ee633842 Mon Sep 17 00:00:00 2001
From: Nick Funk <nick.funk@outlook.com>
Date: Thu, 16 Jul 2020 10:18:02 -0600
Subject: [PATCH] Enforce max width on mod card embeds (#3019)

Some gifs are too wide for the mod cards. Set
a max-width and force it on the media/iframe
so that it doesn't push out mod card controls.

CORL-1179
---
 .../admin/components/ModerateCard/GiphyMedia.tsx       | 10 +++++++++-
 .../client/admin/components/ModerateCard/Media.css     |  6 ++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/core/client/admin/components/ModerateCard/GiphyMedia.tsx b/src/core/client/admin/components/ModerateCard/GiphyMedia.tsx
index 6bca430b9..f35867a2f 100644
--- a/src/core/client/admin/components/ModerateCard/GiphyMedia.tsx
+++ b/src/core/client/admin/components/ModerateCard/GiphyMedia.tsx
@@ -28,7 +28,13 @@ const GiphyMedia: FunctionComponent<Props> = ({
     <div className={styles.embed}>
       {!showAnimated && still && (
         <BaseButton onClick={toggleImage} className={styles.toggle}>
-          <img src={still} className={styles.image} alt={title || ""} />
+          <img
+            src={still}
+            className={styles.image}
+            width={width || undefined}
+            height={height || undefined}
+            alt={title || ""}
+          />
           <Flex
             direction="column"
             alignItems="center"
@@ -47,8 +53,10 @@ const GiphyMedia: FunctionComponent<Props> = ({
       {showAnimated && video && (
         <BaseButton onClick={toggleImage}>
           <video
+            className={styles.image}
             width={width || undefined}
             height={height || undefined}
+            title={title || ""}
             autoPlay
             loop
           >
diff --git a/src/core/client/admin/components/ModerateCard/Media.css b/src/core/client/admin/components/ModerateCard/Media.css
index bcafb9cac..90d7ea633 100644
--- a/src/core/client/admin/components/ModerateCard/Media.css
+++ b/src/core/client/admin/components/ModerateCard/Media.css
@@ -1,5 +1,10 @@
 .embed {
   margin: var(--spacing-2) 0;
+
+  max-width: 100%;
+  & > iframe {
+    max-width: 100%;
+  }
 }
 
 .toggle {
@@ -30,4 +35,5 @@
 
 .image {
   display: block;
+  max-width: 100%;
 }