[CORL-391] Fix jankiness when opening reply box of last comment in Stream (#2447)

* feat: add useResizeObserver hook

* fix: stream jumps when clicking on the last reply button when scrolled to the bottom

* chore: use resize observer in auth popup and simplify resize handling

* fix: snapshots and remove resize observer from stream

* fix: focus unmounted rte

src/core/client/auth/App/App.tsx

@@ -1,7 +1,9 @@
 import React, { FunctionComponent } from "react";
 
+import { useResizeObserver } from "coral-framework/hooks";
 import { PropTypesOf } from "coral-framework/types";
 
+import resizePopup from "../dom/resizePopup";
 import AddEmailAddress from "../views/AddEmailAddress";
 import CreatePassword from "../views/CreatePassword";
 import CreateUsername from "../views/CreateUsername";
@@ -47,11 +49,16 @@ const render = ({ view, auth, viewer }: AppProps) => {
   }
 };
 
-const App: FunctionComponent<AppProps> = props => (
-  <>
-    {process.env.NODE_ENV !== "test" && <ViewRouter />}
-    <div>{render(props)}</div>
-  </>
-);
+const App: FunctionComponent<AppProps> = props => {
+  const ref = useResizeObserver(entry => {
+    resizePopup();
+  });
+  return (
+    <div ref={ref}>
+      {process.env.NODE_ENV !== "test" && <ViewRouter />}
+      <div>{render(props)}</div>
+    </div>
+  );
+};
 
 export default App;

src/core/client/auth/App/__snapshots__/App.spec.tsx.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders sign in 1`] = `
-<React.Fragment>
+<div>
   <div>
     <withContext(withMutation(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(SignInContainer)))))))))
       auth={Object {}}
     />
   </div>
-</React.Fragment>
+</div>
 `;

src/core/client/auth/components/AutoHeight.tsx

@@ -1,25 +0,0 @@
-import { Component } from "react";
-
-import resizePopup from "../dom/resizePopup";
-
-/**
- * This component adapts the window height to the current body size
- * when this is mounted or updated.
- */
-export default class AutoHeight extends Component {
-  private updateWindowSize() {
-    window.requestAnimationFrame(() => setTimeout(resizePopup, 0));
-  }
-
-  public componentDidMount() {
-    this.updateWindowSize();
-  }
-
-  public componentDidUpdate() {
-    this.updateWindowSize();
-  }
-
-  public render() {
-    return null;
-  }
-}

src/core/client/auth/index.tsx

@@ -12,16 +12,15 @@ import localesData from "./locales";
 import "coral-ui/theme/variables.css";
 
 /**
- * Adapt popup height to current content every 100ms.
+ * Adapt popup height to current content every 200ms.
  *
  * The goal is to smooth out height inconsistensies  e.g. when fonts
  * are switched out or other resources being loaded that React has no influence
  * over.
  *
- * This works in addition to <AutoHeight /> which
- * adapt popup height when React does an update.
+ * This works in addition to the ResizeObserver in App.tsx
  */
-function pollPopupHeight(interval: number = 100) {
+function pollPopupHeight(interval: number = 200) {
   setTimeout(() => {
     window.requestAnimationFrame(() => {
       resizePopup();

src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap

@@ -341,171 +341,173 @@ Your email address will be used to:
 
 exports[`renders addEmailAddress view 1`] = `
 <div>
-  <div
-    data-testid="addEmailAddress-container"
-  >
+  <div>
     <div
-      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      data-testid="addEmailAddress-container"
     >
-      <div>
-        <h1
-          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
-        >
-          Add Email Address
-        </h1>
-      </div>
-    </div>
-    <div
-      className="Main-root"
-      data-testid="addEmailAddress-main"
-    >
-      <form
-        autoComplete="off"
-        onSubmit={[Function]}
+      <div
+        className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
-        >
-          <p
-            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            For your added security, we require users to add an email address to their accounts.
-Your email address will be used to:
-          </p>
-          <ul
-            className="UnorderedList-root"
-          >
-            <li
-              className="ListItem-root"
-            >
-              <div
-                className="ListItem-leftCol"
-              >
-                <span
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  done
-                </span>
-              </div>
-              <div>
-                <div
-                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                >
-                  Receive updates regarding any changes to your account
-(email address, username, password, etc.)
-                </div>
-              </div>
-            </li>
-            <li
-              className="ListItem-root"
-            >
-              <div
-                className="ListItem-leftCol"
-              >
-                <span
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  done
-                </span>
-              </div>
-              <div>
-                <div
-                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                >
-                  Allow you to download your comments.
-                </div>
-              </div>
-            </li>
-            <li
-              className="ListItem-root"
-            >
-              <div
-                className="ListItem-leftCol"
-              >
-                <span
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  done
-                </span>
-              </div>
-              <div>
-                <div
-                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                >
-                  Send comment notifications that you have chosen to receive.
-                </div>
-              </div>
-            </li>
-          </ul>
-          <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-          >
-            <label
-              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-              htmlFor="email"
-            >
-              Email Address
-            </label>
-            <div
-              className="TextField-root TextField-fullWidth"
-            >
-              <input
-                className="TextField-input TextField-colorRegular"
-                disabled={false}
-                id="email"
-                name="email"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Email Address"
-                type="email"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-          >
-            <label
-              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-              htmlFor="confirmEmail"
-            >
-              Confirm Email Address
-            </label>
-            <div
-              className="TextField-root TextField-fullWidth"
-            >
-              <input
-                className="TextField-input TextField-colorRegular"
-                disabled={false}
-                id="confirmEmail"
-                name="confirmEmail"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Confirm Email Address"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
-            disabled={false}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
+        <div>
+          <h1
+            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
           >
             Add Email Address
-          </button>
+          </h1>
         </div>
-      </form>
+      </div>
+      <div
+        className="Main-root"
+        data-testid="addEmailAddress-main"
+      >
+        <form
+          autoComplete="off"
+          onSubmit={[Function]}
+        >
+          <div
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+          >
+            <p
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            >
+              For your added security, we require users to add an email address to their accounts.
+Your email address will be used to:
+            </p>
+            <ul
+              className="UnorderedList-root"
+            >
+              <li
+                className="ListItem-root"
+              >
+                <div
+                  className="ListItem-leftCol"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-sm"
+                  >
+                    done
+                  </span>
+                </div>
+                <div>
+                  <div
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Receive updates regarding any changes to your account
+(email address, username, password, etc.)
+                  </div>
+                </div>
+              </li>
+              <li
+                className="ListItem-root"
+              >
+                <div
+                  className="ListItem-leftCol"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-sm"
+                  >
+                    done
+                  </span>
+                </div>
+                <div>
+                  <div
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Allow you to download your comments.
+                  </div>
+                </div>
+              </li>
+              <li
+                className="ListItem-root"
+              >
+                <div
+                  className="ListItem-leftCol"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-sm"
+                  >
+                    done
+                  </span>
+                </div>
+                <div>
+                  <div
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Send comment notifications that you have chosen to receive.
+                  </div>
+                </div>
+              </li>
+            </ul>
+            <div
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            >
+              <label
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                htmlFor="email"
+              >
+                Email Address
+              </label>
+              <div
+                className="TextField-root TextField-fullWidth"
+              >
+                <input
+                  className="TextField-input TextField-colorRegular"
+                  disabled={false}
+                  id="email"
+                  name="email"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  placeholder="Email Address"
+                  type="email"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            >
+              <label
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                htmlFor="confirmEmail"
+              >
+                Confirm Email Address
+              </label>
+              <div
+                className="TextField-root TextField-fullWidth"
+              >
+                <input
+                  className="TextField-input TextField-colorRegular"
+                  disabled={false}
+                  id="confirmEmail"
+                  name="confirmEmail"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  placeholder="Confirm Email Address"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Add Email Address
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 </div>

src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap

@@ -98,104 +98,106 @@ we require users to create a password.
 
 exports[`renders createPassword view 1`] = `
 <div>
-  <div
-    data-testid="createPassword-container"
-  >
+  <div>
     <div
-      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      data-testid="createPassword-container"
     >
-      <div>
-        <h1
-          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
-        >
-          Create Password
-        </h1>
-      </div>
-    </div>
-    <div
-      className="Main-root"
-      data-testid="createPassword-main"
-    >
-      <form
-        autoComplete="off"
-        onSubmit={[Function]}
+      <div
+        className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+        <div>
+          <h1
+            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
+          >
+            Create Password
+          </h1>
+        </div>
+      </div>
+      <div
+        className="Main-root"
+        data-testid="createPassword-main"
+      >
+        <form
+          autoComplete="off"
+          onSubmit={[Function]}
         >
-          <p
-            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            To protect against unauthorized changes to your account,
-we require users to create a password.
-          </p>
           <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
-            <label
-              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-              htmlFor="password"
-            >
-              Password
-            </label>
             <p
-              className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
             >
-              Must be at least 8 characters
+              To protect against unauthorized changes to your account,
+we require users to create a password.
             </p>
             <div
-              className="PasswordField-fullWidth PasswordField-root"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
+              <label
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                htmlFor="password"
+              >
+                Password
+              </label>
+              <p
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+              >
+                Must be at least 8 characters
+              </p>
               <div
-                className="PasswordField-wrapper"
+                className="PasswordField-fullWidth PasswordField-root"
               >
-                <input
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
-                  disabled={false}
-                  id="password"
-                  name="password"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="Password"
-                  spellCheck={false}
-                  type="password"
-                  value=""
-                />
                 <div
-                  className="PasswordField-icon"
-                  onClick={[Function]}
-                  role="button"
-                  tabIndex={0}
-                  title="Show password"
+                  className="PasswordField-wrapper"
                 >
-                  <span
-                    aria-hidden="true"
-                    className="Icon-root Icon-sm"
+                  <input
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                    disabled={false}
+                    id="password"
+                    name="password"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    placeholder="Password"
+                    spellCheck={false}
+                    type="password"
+                    value=""
+                  />
+                  <div
+                    className="PasswordField-icon"
+                    onClick={[Function]}
+                    role="button"
+                    tabIndex={0}
+                    title="Show password"
                   >
-                    visibility
-                  </span>
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-sm"
+                    >
+                      visibility
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Create Password
+            </button>
           </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
-            disabled={false}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
-          >
-            Create Password
-          </button>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
   </div>
 </div>

src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap

@@ -75,81 +75,83 @@ exports[`checks for invalid username 1`] = `
 
 exports[`renders createUsername view 1`] = `
 <div>
-  <div
-    data-testid="createUsername-container"
-  >
+  <div>
     <div
-      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      data-testid="createUsername-container"
     >
-      <div>
-        <h1
-          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
-        >
-          Create Username
-        </h1>
-      </div>
-    </div>
-    <div
-      className="Main-root"
-      data-testid="createUsername-main"
-    >
-      <form
-        autoComplete="off"
-        onSubmit={[Function]}
+      <div
+        className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
-        >
-          <p
-            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Your username is an identifier that will appear on all of your comments.
-          </p>
-          <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-          >
-            <label
-              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-              htmlFor="username"
-            >
-              Username
-            </label>
-            <p
-              className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
-            >
-              You may use “_” and “.” Spaces not permitted.
-            </p>
-            <div
-              className="TextField-root TextField-fullWidth"
-            >
-              <input
-                className="TextField-input TextField-colorRegular"
-                disabled={false}
-                id="username"
-                name="username"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Username"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
-            disabled={false}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
+        <div>
+          <h1
+            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
           >
             Create Username
-          </button>
+          </h1>
         </div>
-      </form>
+      </div>
+      <div
+        className="Main-root"
+        data-testid="createUsername-main"
+      >
+        <form
+          autoComplete="off"
+          onSubmit={[Function]}
+        >
+          <div
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+          >
+            <p
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            >
+              Your username is an identifier that will appear on all of your comments.
+            </p>
+            <div
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            >
+              <label
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                htmlFor="username"
+              >
+                Username
+              </label>
+              <p
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+              >
+                You may use “_” and “.” Spaces not permitted.
+              </p>
+              <div
+                className="TextField-root TextField-fullWidth"
+              >
+                <input
+                  className="TextField-input TextField-colorRegular"
+                  disabled={false}
+                  id="username"
+                  name="username"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  placeholder="Username"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Create Username
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 </div>

src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap

@@ -2,94 +2,96 @@
 
 exports[`renders forgot password view 1`] = `
 <div>
-  <div
-    data-testid="forgotPassword-container"
-  >
+  <div>
     <div
-      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      data-testid="forgotPassword-container"
     >
-      <div>
-        <h1
-          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
-        >
-          Forgot Password?
-        </h1>
-      </div>
-    </div>
-    <div
-      className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
-    >
-      <div>
-        <div
-          className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-        >
-          <a
-            className="TextLink-root"
-            href="http://localhost/?view=SIGN_IN"
-            onClick={[Function]}
-          >
-            Go back to sign in page
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      className="Main-root"
-      data-testid="forgotPassword-main"
-    >
-      <form
-        autoComplete="off"
-        onSubmit={[Function]}
+      <div
+        className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
-        >
-          <p
-            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        <div>
+          <h1
+            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
           >
-            Enter your email address below and we will send you a link to
-reset your password.
-          </p>
-          <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-          >
-            <label
-              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-              htmlFor="email"
-            >
-              Email Address
-            </label>
-            <div
-              className="TextField-root TextField-fullWidth"
-            >
-              <input
-                className="TextField-input TextField-colorRegular"
-                disabled={false}
-                id="email"
-                name="email"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Email Address"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
-            disabled={false}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
-          >
-            Send Email
-          </button>
+            Forgot Password?
+          </h1>
         </div>
-      </form>
+      </div>
+      <div
+        className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      >
+        <div>
+          <div
+            className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <a
+              className="TextLink-root"
+              href="http://localhost/?view=SIGN_IN"
+              onClick={[Function]}
+            >
+              Go back to sign in page
+            </a>
+          </div>
+        </div>
+      </div>
+      <div
+        className="Main-root"
+        data-testid="forgotPassword-main"
+      >
+        <form
+          autoComplete="off"
+          onSubmit={[Function]}
+        >
+          <div
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          >
+            <p
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            >
+              Enter your email address below and we will send you a link to
+reset your password.
+            </p>
+            <div
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            >
+              <label
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                htmlFor="email"
+              >
+                Email Address
+              </label>
+              <div
+                className="TextField-root TextField-fullWidth"
+              >
+                <input
+                  className="TextField-input TextField-colorRegular"
+                  disabled={false}
+                  id="email"
+                  name="email"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  placeholder="Email Address"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <button
+              className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Send Email
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 </div>

src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap

@@ -697,173 +697,175 @@ exports[`checks for invalid email 1`] = `
 
 exports[`renders sign in view 1`] = `
 <div>
-  <div
-    data-testid="signIn-container"
-  >
+  <div>
     <div
-      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
-    >
-      <div>
-        <h1
-          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
-        >
-          Sign In
-        </h1>
-        <h1
-          className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
-        >
-          to join the conversation
-        </h1>
-      </div>
-    </div>
-    <div
-      className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
-    >
-      <div>
-        <div
-          className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-        >
-          <span>
-            Don't have an account? 
-          </span>
-          <a
-            className="TextLink-root"
-            href="http://localhost/?view=SIGN_UP"
-            onClick={[Function]}
-          >
-            Sign Up
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      className="Main-root"
-      data-testid="signIn-main"
+      data-testid="signIn-container"
     >
       <div
-        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+        className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <form
-          autoComplete="off"
-          onSubmit={[Function]}
-        >
+        <div>
+          <h1
+            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
+          >
+            Sign In
+          </h1>
+          <h1
+            className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
+          >
+            to join the conversation
+          </h1>
+        </div>
+      </div>
+      <div
+        className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      >
+        <div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Don't have an account? 
+            </span>
+            <a
+              className="TextLink-root"
+              href="http://localhost/?view=SIGN_UP"
+              onClick={[Function]}
+            >
+              Sign Up
+            </a>
+          </div>
+        </div>
+      </div>
+      <div
+        className="Main-root"
+        data-testid="signIn-main"
+      >
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+        >
+          <form
+            autoComplete="off"
+            onSubmit={[Function]}
           >
             <div
-              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
-              <label
-                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                htmlFor="email"
-              >
-                Email Address
-              </label>
               <div
-                className="TextField-root TextField-fullWidth"
-              >
-                <input
-                  className="TextField-input TextField-colorRegular"
-                  disabled={false}
-                  id="email"
-                  name="email"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="Email Address"
-                  type="email"
-                  value=""
-                />
-              </div>
-            </div>
-            <div
-              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-            >
-              <label
-                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                htmlFor="password"
-              >
-                Password
-              </label>
-              <div
-                className="PasswordField-fullWidth PasswordField-root"
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
               >
+                <label
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  htmlFor="email"
+                >
+                  Email Address
+                </label>
                 <div
-                  className="PasswordField-wrapper"
+                  className="TextField-root TextField-fullWidth"
                 >
                   <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                    className="TextField-input TextField-colorRegular"
                     disabled={false}
-                    id="password"
-                    name="password"
+                    id="email"
+                    name="email"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
-                    placeholder="Password"
-                    spellCheck={false}
-                    type="password"
+                    placeholder="Email Address"
+                    type="email"
                     value=""
                   />
-                  <div
-                    className="PasswordField-icon"
-                    onClick={[Function]}
-                    role="button"
-                    tabIndex={0}
-                    title="Show password"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-sm"
-                    >
-                      visibility
-                    </span>
-                  </div>
                 </div>
               </div>
               <div
-                className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
               >
-                <p
-                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                <label
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  htmlFor="password"
                 >
-                  <a
-                    className="TextLink-root"
-                    href="http://localhost/?view=FORGOT_PASSWORD"
-                    onClick={[Function]}
+                  Password
+                </label>
+                <div
+                  className="PasswordField-fullWidth PasswordField-root"
+                >
+                  <div
+                    className="PasswordField-wrapper"
                   >
-                    Forgot your password?
-                  </a>
-                </p>
+                    <input
+                      autoCapitalize="off"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                      disabled={false}
+                      id="password"
+                      name="password"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      placeholder="Password"
+                      spellCheck={false}
+                      type="password"
+                      value=""
+                    />
+                    <div
+                      className="PasswordField-icon"
+                      onClick={[Function]}
+                      role="button"
+                      tabIndex={0}
+                      title="Show password"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-sm"
+                      >
+                        visibility
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
+                >
+                  <p
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    <a
+                      className="TextLink-root"
+                      href="http://localhost/?view=FORGOT_PASSWORD"
+                      onClick={[Function]}
+                    >
+                      Forgot your password?
+                    </a>
+                  </p>
+                </div>
               </div>
-            </div>
-            <button
-              className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              <span
-                aria-hidden="true"
-                className="Icon-root Icon-md ButtonIcon-root"
+              <button
+                className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+                disabled={false}
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="submit"
               >
-                email
-              </span>
-              <span>
-                Sign in with Email
-              </span>
-            </button>
-          </div>
-        </form>
-        <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
-        />
+                <span
+                  aria-hidden="true"
+                  className="Icon-root Icon-md ButtonIcon-root"
+                >
+                  email
+                </span>
+                <span>
+                  Sign in with Email
+                </span>
+              </button>
+            </div>
+          </form>
+          <div
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          />
+        </div>
       </div>
     </div>
   </div>

src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap

@@ -1808,194 +1808,196 @@ exports[`checks for too short username 1`] = `
 
 exports[`renders sign up form 1`] = `
 <div>
-  <div
-    data-testid="signUp-container"
-  >
+  <div>
     <div
-      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
-    >
-      <div>
-        <h1
-          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
-        >
-          Sign Up
-        </h1>
-        <h1
-          className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
-        >
-          to join the conversation
-        </h1>
-      </div>
-    </div>
-    <div
-      className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
-    >
-      <div>
-        <div
-          className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-        >
-          <span>
-            Already have an account? 
-          </span>
-          <a
-            className="TextLink-root"
-            href="http://localhost/?view=SIGN_IN"
-            onClick={[Function]}
-          >
-            Sign In
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      className="Main-root"
-      data-testid="signUp-main"
+      data-testid="signUp-container"
     >
       <div
-        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+        className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
       >
-        <form
-          autoComplete="off"
-          onSubmit={[Function]}
-        >
+        <div>
+          <h1
+            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
+          >
+            Sign Up
+          </h1>
+          <h1
+            className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
+          >
+            to join the conversation
+          </h1>
+        </div>
+      </div>
+      <div
+        className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      >
+        <div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          >
+            <span>
+              Already have an account? 
+            </span>
+            <a
+              className="TextLink-root"
+              href="http://localhost/?view=SIGN_IN"
+              onClick={[Function]}
+            >
+              Sign In
+            </a>
+          </div>
+        </div>
+      </div>
+      <div
+        className="Main-root"
+        data-testid="signUp-main"
+      >
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+        >
+          <form
+            autoComplete="off"
+            onSubmit={[Function]}
           >
             <div
-              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
-              <label
-                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                htmlFor="email"
-              >
-                Email Address
-              </label>
               <div
-                className="TextField-root TextField-fullWidth"
-              >
-                <input
-                  className="TextField-input TextField-colorRegular"
-                  disabled={false}
-                  id="email"
-                  name="email"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="Email Address"
-                  type="email"
-                  value=""
-                />
-              </div>
-            </div>
-            <div
-              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-            >
-              <label
-                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                htmlFor="username"
-              >
-                Username
-              </label>
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
-              >
-                You may use “_” and “.” Spaces not permitted.
-              </p>
-              <div
-                className="TextField-root TextField-fullWidth"
-              >
-                <input
-                  className="TextField-input TextField-colorRegular"
-                  disabled={false}
-                  id="username"
-                  name="username"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="Username"
-                  type="text"
-                  value=""
-                />
-              </div>
-            </div>
-            <div
-              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-            >
-              <label
-                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                htmlFor="password"
-              >
-                Password
-              </label>
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
-              >
-                Must be at least 8 characters
-              </p>
-              <div
-                className="PasswordField-fullWidth PasswordField-root"
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
               >
+                <label
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  htmlFor="email"
+                >
+                  Email Address
+                </label>
                 <div
-                  className="PasswordField-wrapper"
+                  className="TextField-root TextField-fullWidth"
                 >
                   <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                    className="TextField-input TextField-colorRegular"
                     disabled={false}
-                    id="password"
-                    name="password"
+                    id="email"
+                    name="email"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
-                    placeholder="Password"
-                    spellCheck={false}
-                    type="password"
+                    placeholder="Email Address"
+                    type="email"
                     value=""
                   />
+                </div>
+              </div>
+              <div
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              >
+                <label
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  htmlFor="username"
+                >
+                  Username
+                </label>
+                <p
+                  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+                >
+                  You may use “_” and “.” Spaces not permitted.
+                </p>
+                <div
+                  className="TextField-root TextField-fullWidth"
+                >
+                  <input
+                    className="TextField-input TextField-colorRegular"
+                    disabled={false}
+                    id="username"
+                    name="username"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    placeholder="Username"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              >
+                <label
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  htmlFor="password"
+                >
+                  Password
+                </label>
+                <p
+                  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
+                >
+                  Must be at least 8 characters
+                </p>
+                <div
+                  className="PasswordField-fullWidth PasswordField-root"
+                >
                   <div
-                    className="PasswordField-icon"
-                    onClick={[Function]}
-                    role="button"
-                    tabIndex={0}
-                    title="Show password"
+                    className="PasswordField-wrapper"
                   >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-sm"
+                    <input
+                      autoCapitalize="off"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                      disabled={false}
+                      id="password"
+                      name="password"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      placeholder="Password"
+                      spellCheck={false}
+                      type="password"
+                      value=""
+                    />
+                    <div
+                      className="PasswordField-icon"
+                      onClick={[Function]}
+                      role="button"
+                      tabIndex={0}
+                      title="Show password"
                     >
-                      visibility
-                    </span>
+                      <span
+                        aria-hidden="true"
+                        className="Icon-root Icon-sm"
+                      >
+                        visibility
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <button
-              className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              <span
-                aria-hidden="true"
-                className="Icon-root Icon-md ButtonIcon-root"
+              <button
+                className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+                disabled={false}
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="submit"
               >
-                email
-              </span>
-              <span>
-                Sign up with Email
-              </span>
-            </button>
-          </div>
-        </form>
-        <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
-        />
+                <span
+                  aria-hidden="true"
+                  className="Icon-root Icon-md ButtonIcon-root"
+                >
+                  email
+                </span>
+                <span>
+                  Sign up with Email
+                </span>
+              </button>
+            </div>
+          </form>
+          <div
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          />
+        </div>
       </div>
     </div>
   </div>

src/core/client/auth/test/accountCompletion.spec.tsx

@@ -62,7 +62,6 @@ beforeEach(async () => {
 });
 
 afterEach(async () => {
-  await wait(() => expect(windowMock.resizeStub.called).toBe(true));
   windowMock.restore();
 });
 

src/core/client/auth/test/addEmailAddress.spec.tsx

@@ -11,9 +11,6 @@ import {
 
 import create from "./create";
 import { settings } from "./fixtures";
-import mockWindow from "./mockWindow";
-
-let windowMock: ReturnType<typeof mockWindow>;
 
 async function createTestRenderer(
   customResolver: any = {},
@@ -60,15 +57,6 @@ async function createTestRenderer(
   };
 }
 
-beforeEach(async () => {
-  windowMock = mockWindow();
-});
-
-afterEach(async () => {
-  await wait(() => expect(windowMock.resizeStub.called).toBe(true));
-  windowMock.restore();
-});
-
 it("renders addEmailAddress view", async () => {
   const { root } = await createTestRenderer();
   expect(toJSON(root)).toMatchSnapshot();

src/core/client/auth/test/createPassword.spec.tsx

@@ -11,9 +11,6 @@ import {
 
 import create from "./create";
 import { settings } from "./fixtures";
-import mockWindow from "./mockWindow";
-
-let windowMock: ReturnType<typeof mockWindow>;
 
 async function createTestRenderer(
   customResolver: any = {},
@@ -56,15 +53,6 @@ async function createTestRenderer(
   };
 }
 
-beforeEach(async () => {
-  windowMock = mockWindow();
-});
-
-afterEach(async () => {
-  await wait(() => expect(windowMock.resizeStub.called).toBe(true));
-  windowMock.restore();
-});
-
 it("renders createPassword view", async () => {
   const { root } = await createTestRenderer();
   expect(toJSON(root)).toMatchSnapshot();

src/core/client/auth/test/createUsername.spec.tsx

@@ -11,9 +11,6 @@ import {
 
 import create from "./create";
 import { settings } from "./fixtures";
-import mockWindow from "./mockWindow";
-
-let windowMock: ReturnType<typeof mockWindow>;
 
 async function createTestRenderer(
   customResolver: any = {},
@@ -56,15 +53,6 @@ async function createTestRenderer(
   };
 }
 
-beforeEach(async () => {
-  windowMock = mockWindow();
-});
-
-afterEach(async () => {
-  await wait(() => expect(windowMock.resizeStub.called).toBe(true));
-  windowMock.restore();
-});
-
 it("renders createUsername view", async () => {
   const { root } = await createTestRenderer();
   expect(toJSON(root)).toMatchSnapshot();

src/core/client/auth/test/forgotPassword.spec.tsx

@@ -6,7 +6,6 @@ import {
   act,
   createResolversStub,
   CreateTestRendererParams,
-  wait,
   waitForElement,
   within,
 } from "coral-framework/testHelpers";
@@ -59,7 +58,6 @@ beforeEach(async () => {
 });
 
 afterEach(async () => {
-  await wait(() => expect(windowMock.resizeStub.called).toBe(true));
   windowMock.restore();
 });
 

src/core/client/auth/test/navigation.spec.tsx

@@ -1,11 +1,10 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { wait, waitForElement, within } from "coral-framework/testHelpers";
+import { waitForElement, within } from "coral-framework/testHelpers";
 
 import create from "./create";
 import { settings } from "./fixtures";
-import mockWindow from "./mockWindow";
 
 async function createTestRenderer(
   initialView: string
@@ -26,16 +25,6 @@ async function createTestRenderer(
   return testRenderer;
 }
 
-let windowMock: ReturnType<typeof mockWindow>;
-beforeEach(() => {
-  windowMock = mockWindow();
-});
-
-afterEach(async () => {
-  await wait(() => expect(windowMock.resizeStub.called).toBe(true));
-  windowMock.restore();
-});
-
 it("renders sign in form", async () => {
   const testRenderer = await createTestRenderer("SIGN_IN");
   await waitForElement(() =>

src/core/client/auth/test/signIn.spec.tsx

@@ -12,9 +12,6 @@ import {
 
 import create from "./create";
 import { settings } from "./fixtures";
-import mockWindow from "./mockWindow";
-
-let windowMock: ReturnType<typeof mockWindow>;
 
 async function createTestRenderer(
   customResolver: any = {},
@@ -54,15 +51,6 @@ async function createTestRenderer(
   };
 }
 
-beforeEach(async () => {
-  windowMock = mockWindow();
-});
-
-afterEach(async () => {
-  await wait(() => expect(windowMock.resizeStub.called).toBe(true));
-  windowMock.restore();
-});
-
 it("renders sign in view", async () => {
   const { testRenderer } = await createTestRenderer();
   expect(testRenderer.toJSON()).toMatchSnapshot();

src/core/client/auth/test/signUp.spec.tsx

@@ -11,9 +11,6 @@ import {
 
 import create from "./create";
 import { settings } from "./fixtures";
-import mockWindow from "./mockWindow";
-
-let windowMock: ReturnType<typeof mockWindow>;
 
 async function createTestRenderer(customResolver: any = {}) {
   const resolvers = {
@@ -49,15 +46,6 @@ async function createTestRenderer(customResolver: any = {}) {
   };
 }
 
-beforeEach(async () => {
-  windowMock = mockWindow();
-});
-
-afterEach(async () => {
-  await wait(() => expect(windowMock.resizeStub.called).toBe(true));
-  windowMock.restore();
-});
-
 it("renders sign up form", async () => {
   const { testRenderer } = await createTestRenderer();
   expect(testRenderer.toJSON()).toMatchSnapshot();

src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx

@@ -4,7 +4,6 @@ import React, { Component } from "react";
 import { Form } from "react-final-form";
 
 import { Bar, Title } from "coral-auth/components//Header";
-import AutoHeight from "coral-auth/components/AutoHeight";
 import ConfirmEmailField from "coral-auth/components/ConfirmEmailField";
 import EmailField from "coral-auth/components/EmailField";
 import Main from "coral-auth/components/Main";
@@ -51,7 +50,6 @@ class AddEmailAddressContainer extends Component<Props> {
           <Form onSubmit={this.handleSubmit}>
             {({ handleSubmit, submitting, submitError }) => (
               <form autoComplete="off" onSubmit={handleSubmit}>
-                <AutoHeight />
                 <HorizontalGutter size="oneAndAHalf">
                   <Localized id="addEmailAddress-whatItIs">
                     <Typography variant="bodyCopy">

src/core/client/auth/views/CreatePassword/CreatePassword.tsx

@@ -4,7 +4,6 @@ import React, { Component } from "react";
 import { Form } from "react-final-form";
 
 import { Bar, Title } from "coral-auth/components//Header";
-import AutoHeight from "coral-auth/components/AutoHeight";
 import Main from "coral-auth/components/Main";
 import SetPasswordField from "coral-auth/components/SetPasswordField";
 import { OnSubmit } from "coral-framework/lib/form";
@@ -50,7 +49,6 @@ class CreatePasswordContainer extends Component<Props> {
           <Form onSubmit={this.handleSubmit}>
             {({ handleSubmit, submitting, submitError }) => (
               <form autoComplete="off" onSubmit={handleSubmit}>
-                <AutoHeight />
                 <HorizontalGutter size="oneAndAHalf">
                   <Localized id="createPassword-whatItIs">
                     <Typography variant="bodyCopy">

src/core/client/auth/views/CreateUsername/CreateUsername.tsx

@@ -4,7 +4,6 @@ import React, { Component } from "react";
 import { Form } from "react-final-form";
 
 import { Bar, Title } from "coral-auth/components//Header";
-import AutoHeight from "coral-auth/components/AutoHeight";
 import Main from "coral-auth/components/Main";
 import UsernameField from "coral-auth/components/UsernameField";
 import { OnSubmit } from "coral-framework/lib/form";
@@ -51,7 +50,6 @@ class CreateUsernameContainer extends Component<Props> {
           <Form onSubmit={this.handleSubmit}>
             {({ handleSubmit, submitting, submitError }) => (
               <form autoComplete="off" onSubmit={handleSubmit}>
-                <AutoHeight />
                 <HorizontalGutter size="oneAndAHalf">
                   <Localized id="createUsername-whatItIs">
                     <Typography variant="bodyCopy">

src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx

@@ -3,7 +3,6 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 import { Field, Form } from "react-final-form";
 
-import AutoHeight from "coral-auth/components/AutoHeight";
 import { Bar, SubBar, Title } from "coral-auth/components/Header";
 import Main from "coral-auth/components/Main";
 import { getViewURL } from "coral-auth/helpers";
@@ -94,7 +93,6 @@ const ForgotPasswordForm: FunctionComponent<Props> = ({
         <Form onSubmit={onSubmit} initialValues={{ email }}>
           {({ handleSubmit, submitting, submitError }) => (
             <form autoComplete="off" onSubmit={handleSubmit}>
-              <AutoHeight />
               <HorizontalGutter size="full">
                 <Localized id="forgotPassword-enterEmailAndGetALink">
                   <Typography variant="bodyCopy">

src/core/client/auth/views/SignIn/SignIn.tsx

@@ -1,7 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import AutoHeight from "coral-auth/components/AutoHeight";
 import { Bar, SubBar, Subtitle, Title } from "coral-auth/components/Header";
 import Main from "coral-auth/components/Main";
 import OrSeparator from "coral-auth/components/OrSeparator";
@@ -46,7 +45,6 @@ const SignIn: FunctionComponent<SignInForm> = ({
     facebookEnabled || googleEnabled || oidcEnabled;
   return (
     <div data-testid="signIn-container">
-      <AutoHeight />
       <Localized
         id="signIn-signInToJoinHeader"
         title={<Title />}

src/core/client/auth/views/SignIn/SignInWithEmail.tsx

@@ -2,7 +2,6 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field, Form } from "react-final-form";
 
-import AutoHeight from "coral-auth/components/AutoHeight";
 import EmailField from "coral-auth/components/EmailField";
 import { PasswordField } from "coral-framework/components";
 import {
@@ -39,7 +38,6 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          <AutoHeight />
           <HorizontalGutter size="full">
             {submitError && (
               <CallOut color="error" fullWidth>

src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap

@@ -4,7 +4,6 @@ exports[`renders correctly 1`] = `
 <div
   data-testid="signIn-container"
 >
-  <AutoHeight />
   <Localized
     id="signIn-signInToJoinHeader"
     subtitle={<Subtitle />}
@@ -65,7 +64,6 @@ exports[`renders error 1`] = `
 <div
   data-testid="signIn-container"
 >
-  <AutoHeight />
   <Localized
     id="signIn-signInToJoinHeader"
     subtitle={<Subtitle />}
@@ -132,7 +130,6 @@ exports[`renders without email login 1`] = `
 <div
   data-testid="signIn-container"
 >
-  <AutoHeight />
   <Localized
     id="signIn-signInToJoinHeader"
     subtitle={<Subtitle />}

src/core/client/auth/views/SignUp/SignUp.tsx

@@ -2,7 +2,6 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { Bar, SubBar, Subtitle, Title } from "coral-auth/components//Header";
-import AutoHeight from "coral-auth/components/AutoHeight";
 import Main from "coral-auth/components/Main";
 import OrSeparator from "coral-auth/components/OrSeparator";
 import { PropTypesOf } from "coral-framework/types";
@@ -43,7 +42,6 @@ const SignUp: FunctionComponent<Props> = ({
     facebookEnabled || googleEnabled || oidcEnabled;
   return (
     <div data-testid="signUp-container">
-      <AutoHeight />
       <Localized
         id="signUp-signUpToJoinHeader"
         title={<Title />}

src/core/client/auth/views/SignUp/SignUpWithEmail.tsx

@@ -2,7 +2,6 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Form } from "react-final-form";
 
-import AutoHeight from "coral-auth/components/AutoHeight";
 import EmailField from "coral-auth/components/EmailField";
 import SetPasswordField from "coral-auth/components/SetPasswordField";
 import UsernameField from "coral-auth/components/UsernameField";
@@ -30,7 +29,6 @@ const SignUp: FunctionComponent<Props> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          <AutoHeight />
           <HorizontalGutter size="full">
             {submitError && (
               <CallOut color="error" fullWidth>

src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap

@@ -4,7 +4,6 @@ exports[`renders correctly 1`] = `
 <div
   data-testid="signUp-container"
 >
-  <AutoHeight />
   <Localized
     id="signUp-signUpToJoinHeader"
     subtitle={<Subtitle />}
@@ -65,7 +64,6 @@ exports[`renders without email sign up 1`] = `
 <div
   data-testid="signUp-container"
 >
-  <AutoHeight />
   <Localized
     id="signUp-signUpToJoinHeader"
     subtitle={<Subtitle />}