From 40ad3b4460b66daea5497ba368c85f1d74cc1714 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 23 Feb 2026 19:54:43 -0800
Subject: [PATCH] fix: Issue with height not adjusting (downwards) to aspect
 ratio (#2375)

- Closes #2341
---
 src/components-lib/media-height-controller.ts |  9 ++-----
 .../media-height-controller.test.ts           | 26 +++++++++++++++++++
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components-lib/media-height-controller.ts b/src/components-lib/media-height-controller.ts
index 374904d9..880bec50 100644
--- a/src/components-lib/media-height-controller.ts
+++ b/src/components-lib/media-height-controller.ts
@@ -59,6 +59,7 @@ export class MediaHeightController {
   // rendered height never changes and thus ResizeObserver never fires). This
   // manual "wakeup" allows the controller to temporarily lift the constraint
   // and peek at the true desired height.
+  // See: https://github.com/dermotduffy/advanced-camera-card/issues/2109
   public recalculate(): void {
     this._debouncedSetHeight();
   }
@@ -86,7 +87,6 @@ export class MediaHeightController {
 
     // Calculate the true height.
     const selectedHeight = this._selectedChild.getBoundingClientRect().height;
-    const hostHeight = this._host.getBoundingClientRect().height;
 
     // Reset the original height so that browser transition animation can be
     // applied from the current to the target.
@@ -96,12 +96,7 @@ export class MediaHeightController {
     this._selectedChild.getBoundingClientRect();
 
     if (selectedHeight && !isNaN(selectedHeight) && selectedHeight > 0) {
-      // Set the height to the larger of the selected child or the host itself.
-      // This ensures that the host (the carousel) expands to fit the media, but
-      // does not shrink smaller than itself (which would cause a "flash" or
-      // jump).
-      // See: https://github.com/dermotduffy/advanced-camera-card/issues/2109
-      this._host.style.maxHeight = `${Math.max(selectedHeight, hostHeight)}px`;
+      this._host.style.maxHeight = `${selectedHeight}px`;
     }
   }
 
diff --git a/tests/components-lib/media-height-controller.test.ts b/tests/components-lib/media-height-controller.test.ts
index 73076c97..e0ef7325 100644
--- a/tests/components-lib/media-height-controller.test.ts
+++ b/tests/components-lib/media-height-controller.test.ts
@@ -163,6 +163,32 @@ describe('MediaHeightController', () => {
 
       expect(host.style.maxHeight).toBe('900px');
     });
+
+    it('should allow height to shrink when selected child is shorter', () => {
+      const host = document.createElement('div');
+      const controller = new MediaHeightController(host, 'div');
+
+      const root = document.createElement('div');
+      const child_0 = document.createElement('div');
+      child_0.getBoundingClientRect = vi.fn().mockReturnValue({
+        height: 750,
+      });
+      const child_1 = document.createElement('div');
+      child_1.getBoundingClientRect = vi.fn().mockReturnValue({
+        height: 562,
+      });
+      root.appendChild(child_0);
+      root.appendChild(child_1);
+
+      controller.setRoot(root);
+      controller.setSelected(0);
+
+      expect(host.style.maxHeight).toBe('750px');
+
+      controller.setSelected(1);
+
+      expect(host.style.maxHeight).toBe('562px');
+    });
   });
 
   it('should destroy', () => {