fix(container-breakpoint-observer): Changed the calculation of breakp…

…oint to rely on measurements returned by the IntersectionObserverEntry.

libs/barista-components/container-breakpoint-observer/src/container-breakpoint-observer.ts

@@ -248,13 +248,7 @@ export class DtContainerBreakpointObserver implements OnDestroy {
                   this._zone.run(() => {
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     query.observer!.next({
-                      matches:
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        (query.elementQuery!.range === 'min' &&
-                          entry.isIntersecting) ||
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        (query.elementQuery!.range === 'max' &&
-                          !entry.isIntersecting),
+                      matches: this._isQueryMatching(query, entry),
                       query: queryString,
                     });
                   });
@@ -269,6 +263,45 @@ export class DtContainerBreakpointObserver implements OnDestroy {
     return this._intersectionObserver;
   }
 
+  /**
+   * Checks if the query matches the entry's width or height based on the placeholder and container
+   * measurements returned by the IntersectionObserverEntry.
+   *
+   * @param query query
+   * @param entry intersection observer entry
+   * @returns if the query matches the intersection observer entry
+   * @private
+   */
+  private _isQueryMatching(
+    query: Query,
+    entry: IntersectionObserverEntry,
+  ): boolean {
+    // Check the width of the placeholder span (boundingClientRect) vs container div (rootBounds)
+    const isWidthMatchingQuery =
+      query !== null &&
+      query.elementQuery !== undefined &&
+      query.elementQuery.feature === 'width' &&
+      ((query.elementQuery.range === 'min' &&
+        entry.rootBounds !== null &&
+        entry.rootBounds.width > entry.boundingClientRect.width) ||
+        (query.elementQuery.range === 'max' &&
+          entry.rootBounds !== null &&
+          entry.rootBounds.width < entry.boundingClientRect.width));
+    // Check the height of the placeholder span (boundingClientRect) vs container div (rootBounds)
+    const isHeightMatchingQuery =
+      query !== null &&
+      query.elementQuery !== undefined &&
+      query.elementQuery.feature === 'height' &&
+      ((query.elementQuery.range === 'min' &&
+        entry.rootBounds !== null &&
+        entry.rootBounds.height > entry.boundingClientRect.height) ||
+        (query.elementQuery.range === 'max' &&
+          entry.rootBounds !== null &&
+          entry.rootBounds.height < entry.boundingClientRect.height));
+
+    return isHeightMatchingQuery || isWidthMatchingQuery;
+  }
+
   /** Creates a placeholder element for a given element query. */
   private _createPlaceholderElement(
     elementQuery: ElementQuery,