fix: Issue with height not adjusting (downwards) to aspect ratio (#2375)

- Closes #2341

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._host.style.maxHeight = `${selectedHeight}px`;
-      // 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`;
     }
   }
 

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', () => {