From 1bbc5be6fe386e2fccafa17a9549f0b529a52c26 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 8 Jun 2025 17:01:13 -0700
Subject: [PATCH] fix: Fix issues where camera exceeded allowable width (#2096)

- Closes: #2073
---
 src/scss/live-carousel.scss   |  2 ++
 src/scss/viewer-carousel.scss | 18 ++++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/scss/live-carousel.scss b/src/scss/live-carousel.scss
index f8ecadb4..a011f383 100644
--- a/src/scss/live-carousel.scss
+++ b/src/scss/live-carousel.scss
@@ -30,5 +30,7 @@
   justify-content: center;
 
   height: 100%;
+  width: 100%;
+
   flex: 0 0 100%;
 }
diff --git a/src/scss/viewer-carousel.scss b/src/scss/viewer-carousel.scss
index 9cefc6c7..04ae0873 100644
--- a/src/scss/viewer-carousel.scss
+++ b/src/scss/viewer-carousel.scss
@@ -1,13 +1,17 @@
 :host {
   display: block;
-
-  // Keep carousel controls + unseekable icon relative to the media carousel
-  // itself.
-  position: relative;
-
   --video-max-height: none;
 
-  transition: max-height 0.2s ease-in;
+  transition: max-height 0.1s ease-in-out;
+
+  // Keep carousel controls relative to the media carousel itself.
+  position: relative;
+}
+
+// When the carousel is not part of a grid ensure its height matches its
+// container.
+:host(:not([grid-id])) {
+  height: 100%;
 }
 
 // If the carousel has an unselected attribute set on it, do not let the
@@ -38,5 +42,7 @@
 
 .embla__slide {
   height: 100%;
+  width: 100%;
+
   flex: 0 0 100%;
 }