From a6cba32e570aebbe7996a1066d8878071436e3a5 Mon Sep 17 00:00:00 2001
From: Jan Cernik <66427541+jancernik@users.noreply.github.com>
Date: Sat, 8 Apr 2023 10:43:17 -0300
Subject: [PATCH] FIX: Resize chat collapser when using small width drawer
(#21017)
---
.../stylesheets/common/chat-message-collapser.scss | 3 ++-
.../stylesheets/common/chat-message-images.scss | 4 ++--
.../assets/stylesheets/lazy-videos.scss | 11 +++++++----
3 files changed, 11 insertions(+), 7 deletions(-)
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-collapser.scss b/plugins/chat/assets/stylesheets/common/chat-message-collapser.scss
index c18d6aa83a9..5189621ced8 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message-collapser.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message-collapser.scss
@@ -19,8 +19,9 @@ $max_video_height: 150px;
}
.chat-video-upload {
- height: $max_video_height;
+ max-height: $max_video_height;
width: calc(#{$max_video_height} / 9 * 16);
+ max-width: 100%;
}
.chat-message-collapser-link-small {
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-images.scss b/plugins/chat/assets/stylesheets/common/chat-message-images.scss
index 75958050b40..031f201a67f 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message-images.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message-images.scss
@@ -23,8 +23,8 @@ $max_image_height: 150px;
+ div
.chat-message-collapser-lazy-video {
object-fit: contain;
- height: $max_image_height;
- width: calc(#{$max_image_height} / 9 * 16);
+ max-height: $max_image_height;
+ max-width: calc(#{$max_image_height} / 9 * 16);
}
// Prevent overflow of old lazy-yt images
diff --git a/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss b/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss
index 979624ccaa9..d957b702325 100644
--- a/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss
+++ b/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss
@@ -88,9 +88,12 @@
top: 50%;
transform: translate(-50%, -50%);
transition: 150ms;
+ background-repeat: no-repeat;
+ background-position: center;
+ max-width: 30%;
// Default play button
- background: svg-uri(
+ background-image: svg-uri(
""
);
width: 60px;
@@ -99,7 +102,7 @@
&.youtube-icon {
width: 68px;
height: 48px;
- background: svg-uri(
+ background-image: svg-uri(
""
);
}
@@ -107,7 +110,7 @@
&.vimeo-icon {
width: 77px;
height: 44px;
- background: svg-uri(
+ background-image: svg-uri(
""
);
}
@@ -115,7 +118,7 @@
&.tiktok-icon {
width: 58px;
height: 64px;
- background: svg-uri(
+ background-image: svg-uri(
" "
);
}