1798: Fixing primary-detail resize listener so it only runs with width changes (#1799)

Author: wesruv

CHANGELOG-1.x.md

@@ -1,3 +1,5 @@
+- [HASH](#URL) fix: Update primary-detail resize listener so it only runs with width changes
+
 # 1.11.2 (2021-09-29)
 
 - [ac2af8](https://github.com/patternfly/patternfly-elements/commit/ac2af8367c911af5b7cb3953eff470106c48b93b) fix: mobile-typography demo page now has correct CSS variables

elements/pfe-primary-detail/src/pfe-primary-detail.js

@@ -153,6 +153,7 @@ class PfePrimaryDetail extends PFElement {
     this._detailsBackButton = this.shadowRoot.getElementById("details-wrapper__back");
 
     this._debouncedSetBreakpoint = null;
+    this._windowInnerWidth;
 
     // @todo: decide if we need this anymore
     // Store all focusable element types in variable
@@ -302,6 +303,11 @@ class PfePrimaryDetail extends PFElement {
    * Then manage state of component and manage active/inactive elements
    */
   _setBreakpoint() {
+    // We don't need to do anything if the page width is unchanged
+    if (this._windowInnerWidth === window.innerWidth) {
+      return;
+    }
+
     const breakpointWas = this.breakpoint;
     const breakpointIs = this.offsetWidth < this.breakpointWidth ? "compact" : "desktop";
 
@@ -344,6 +350,8 @@ class PfePrimaryDetail extends PFElement {
         this._setDetailsNavVisibility(false);
       }
     }
+
+    this._windowInnerWidth = window.innerWidth;
   }
 
   /**