From 670f435c645fc51940b865ac7f9fbc8787bc450a Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Thu, 24 Jun 2021 12:51:02 +0200
Subject: [PATCH] Set max widths with embedded audio and video content

---
 src/shared/chat/styles/message-body.scss | 32 ++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/shared/chat/styles/message-body.scss b/src/shared/chat/styles/message-body.scss
index 4331df30c..c8fe0d82b 100644
--- a/src/shared/chat/styles/message-body.scss
+++ b/src/shared/chat/styles/message-body.scss
@@ -1,9 +1,37 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "shared/styles/_mixins.scss";
+
 converse-chat-message-body {
     audio {
-        width: 100%;
+        display: block;
+        @include media-breakpoint-down(sm) {
+            max-width: 95%;
+        }
+        @include media-breakpoint-up(md) {
+            max-width: 75%;
+        }
+        @include media-breakpoint-up(lg) {
+            max-width: 66%;
+        }
+        @include media-breakpoint-up(xl) {
+            max-width: 50%;
+        }
     }
 
     video {
-        max-height: 25vh;
+        display: block;
+        @include media-breakpoint-down(sm) {
+            max-width: 95%;
+        }
+        @include media-breakpoint-up(md) {
+            max-width: 75%;
+        }
+        @include media-breakpoint-up(lg) {
+            max-width: 66%;
+        }
+        @include media-breakpoint-up(xl) {
+            max-width: 50%;
+        }
     }
 }