message: Prevent layout trashing on EffectsOverlay
diff: @@ -18,6 +18,7 @@ import React, { FunctionComponent, useEffect, useRef } from 'react';
  import dis from '../../../dispatcher/dispatcher';
  import ICanvasEffect from '../../../effects/ICanvasEffect';
  import { CHAT_EFFECTS } from '../../../effects'
  +import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
  interface IProps {
  roomWidth: number;
  @@ -45,8 +46,8 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
  useEffect(() => {
  const resize = () => {
  - if (canvasRef.current) {
  - canvasRef.current.height = window.innerHeight;
  + if (canvasRef.current && canvasRef.current?.height !== UIStore.instance.windowHeight) {
  + canvasRef.current.height = UIStore.instance.windowHeight;
  }
  };
  const onAction = (payload: { action: string }) => {
  @@ -58,12 +59,12 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
  }
  const dispatcherRef = dis.register(onAction);
  const canvas = canvasRef.current;
  - canvas.height = window.innerHeight;
  - window.addEventListener('resize', resize, true);
  + canvas.height = UIStore.instance.windowHeight;
  + UIStore.instance.on(UI_EVENTS.Resize, resize);
  return () => {
  dis.unregister(dispatcherRef);
  - window.removeEventListener('resize', resize);
  + UIStore.instance.off(UI_EVENTS.Resize, resize);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const currentEffects = effectsRef.current; // this is not a react node ref, warning can be safely ignored
  for (const effect in currentEffects) {
  