fix(drawer): Fixes an issue of width-drift when closing the drawer.

With a lot of content in the drawer-content, the drawer-body was changing size due to the flex container around it.

Keeping track of the width when closing and setting it as a min and max width boundary, keeps the drawer-body from relayouting and prevents the drift.

Fixes APM-266068

apps/components-e2e/src/components/quick-filter/quick-filter/quick-filter.html

@@ -9,7 +9,12 @@
     All options in the filter field above
   </dt-quick-filter-sub-title>
 
-  my content
+  <div>
+    my contentmy contentmy contentmy contentmy contentmy contentmy contentmy
+    contentmy contentmy contentmy contentmy contentmy contentmy contentmy
+    contentmy contentmy contentmy contentmy contentmy contentmy contentmy
+    contentmy contentmy contentmy contentmy contentmy contentmy content
+  </div>
 </dt-quick-filter>
 
 <button id="switchToFirstDatasource" (click)="switchToDataSource(0)">

libs/barista-components/drawer/src/drawer.html

@@ -1,3 +1,7 @@
-<div class="dt-drawer-body">
+<div
+  class="dt-drawer-body"
+  [style.min-width.px]="_closedWidth"
+  [style.max-width.px]="_closedWidth"
+>
   <ng-content></ng-content>
 </div>

libs/barista-components/drawer/src/drawer.ts

@@ -177,6 +177,14 @@ export class DtDrawer implements OnInit, AfterContentChecked, OnDestroy {
    */
   _animationEnd = new Subject<AnimationEvent>();
 
+  /**
+   * @internal
+   * Width that will be set when the Drawer is closing to keep
+   * the drawer from relayouting and adjusting it's size
+   * due to the flex container.
+   */
+  _closedWidth: number | null;
+
   /** Used to skip the initial animation */
   private _enableAnimations = false;
 
@@ -265,6 +273,16 @@ export class DtDrawer implements OnInit, AfterContentChecked, OnDestroy {
   toggle(opened: boolean = !this.opened): void {
     this._opened = opened;
 
+    // When the drawer is closed, we need to fix
+    // it's width to the original size to prevent relayout
+    // If the drawer would change size during this process,
+    // a drift would appear like in APM-266068
+    if (this._opened === false) {
+      this._closedWidth = this._width;
+    } else {
+      this._closedWidth = null;
+    }
+
     this._animationState = opened
       ? this._enableAnimations
         ? 'open'