fix BaseWidget resize

src/components/mixins/ScrollableTableMixin.ts

@@ -12,6 +12,8 @@ export default class ScrollableTableMixin extends Mixins(
   readonly FontSizeRate = WALLET_CONSTS.FontSizeRate;
   readonly FontWeightRate = WALLET_CONSTS.FontWeightRate;
 
+  private scrollbarWatcher: Nullable<FnWithoutArgs> = null;
+
   @Ref('table') readonly tableComponent!: any;
 
   get loadingState(): boolean {
@@ -39,6 +41,10 @@ export default class ScrollableTableMixin extends Mixins(
     });
   }
 
+  beforeDestroy(): void {
+    this.resetScrollbarWatcher();
+  }
+
   public handlePaginationClick(button: WALLET_CONSTS.PaginationButton): void {
     let current = 1; // First by default (instead of case WALLET_CONSTS.PaginationButton.First)
 
@@ -76,7 +82,7 @@ export default class ScrollableTableMixin extends Mixins(
     elTableBodyWrapper.appendChild(scrollbar.$el);
     scrollbarView.appendChild(elTableNativeTable);
 
-    this.$watch(
+    this.scrollbarWatcher = this.$watch(
       () => (scrollbar.$children[0] as any).moveX,
       () => {
         const scrollLeft = scrollbarWrap.scrollLeft;
@@ -88,4 +94,9 @@ export default class ScrollableTableMixin extends Mixins(
       }
     );
   }
+
+  private resetScrollbarWatcher(): void {
+    this.scrollbarWatcher?.();
+    this.scrollbarWatcher = null;
+  }
 }

src/components/shared/Widget/Base.vue

@@ -41,6 +41,8 @@ import { Component, Prop, Vue, Ref } from 'vue-property-decorator';
 
 import { debouncedInputHandler } from '@/utils';
 
+type Size = Pick<DOMRect, 'width' | 'height'>;
+
 @Component
 export default class BaseWidget extends Vue {
   /**
@@ -76,15 +78,15 @@ export default class BaseWidget extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly loading!: boolean;
 
-  @Prop({ default: () => {}, type: Function }) readonly onResize!: (id: string, rect: Partial<DOMRect>) => void;
+  @Prop({ default: () => {}, type: Function }) readonly onResize!: (id: string, size: Size) => void;
 
   @Ref('container') readonly container!: Vue;
   @Ref('content') readonly content!: HTMLDivElement;
 
   private observer: ResizeObserver | null = null;
   private handleContentResize = debouncedInputHandler(this.onContentResize, 300, { leading: false });
 
-  private rect: Partial<DOMRect> = {
+  private size: Size = {
     width: 0,
     height: 0,
   };
@@ -99,7 +101,7 @@ export default class BaseWidget extends Vue {
 
   mounted(): void {
     this.createContentObserver();
-    this.updateRect(this.getClientRect()); // initial
+    this.updateSize(this.getWidgetSize()); // initial
   }
 
   beforeDestroy(): void {
@@ -118,22 +120,33 @@ export default class BaseWidget extends Vue {
     this.observer = null;
   }
 
-  private getClientRect(): DOMRect {
-    return this.container.$el.getBoundingClientRect();
+  private getWidgetSize(): Size {
+    return this.getElementSize(this.container.$el);
+  }
+
+  private getWidgetContentSize(): Size {
+    return this.getElementSize(this.content);
+  }
+
+  private getElementSize(el: Element): Size {
+    const { width, height } = el.getBoundingClientRect();
+
+    return {
+      width: Math.floor(width),
+      height: Math.floor(height),
+    };
   }
 
-  private updateRect(rect: Partial<DOMRect>): void {
-    this.rect.width = rect.width;
-    this.rect.height = rect.height;
+  private updateSize(size: Size): void {
+    this.size = size;
   }
 
-  onContentResize(): void {
-    const { width, height } = this.getClientRect();
-    const rect = { width, height };
+  private onContentResize(): void {
+    const size = this.getWidgetContentSize();
 
-    if (!isEqual(rect)(this.rect)) {
-      this.updateRect(rect);
-      this.onResize(this.id, this.rect);
+    if (!isEqual(size)(this.size)) {
+      this.onResize(this.id, this.getWidgetSize());
+      this.updateSize(this.getWidgetContentSize());
     }
   }
 }

src/components/shared/Widget/Grid.vue

@@ -224,6 +224,7 @@ export default class WidgetsGrid extends Vue {
     // `h = (height + margin) / (rowHeight + margin)`
     const calculatedH = Math.ceil((height + this.margin) / (this.rowHeight + this.margin));
     const updatedH = Math.max(widget.minH ?? 1, calculatedH);
+    console.log(widget.h, updatedH);
     // mutate local layout
     widget.h = updatedH;
     // update component layout