Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/classic/show.tsx (TypeScript)

Code before:
    challengeTypes.html,
    challengeTypes.modern,
    challengeTypes.multifileCertProject,
    challengeTypes.multifilePythonCertProject,
    challengeTypes.python,
    challengeTypes.lab
  ].includes(challengeType);
  const getLayoutState = () => {
    const reflexLayout = store.get(REFLEX_LAYOUT) as ReflexLayout | null;

    // Check that the layout values stored are valid (exist in base layout). If
    // not valid, it will fallback to the base layout values and be set on next
    // user resize.
    const isValidLayout =
      reflexLayout &&
      isContained(Object.keys(BASE_LAYOUT), Object.keys(reflexLayout));

    if (!isValidLayout) store.remove(REFLEX_LAYOUT);

    return isValidLayout ? reflexLayout : BASE_LAYOUT;
  };

  const onPreviewResize = () => {
    console.log('onPreviewResize');
    xtermFitRef.current?.fit();
  };

  // layout: Holds the information of the panes sizes for desktop view
  const [layout, setLayout] = useState(getLayoutState());

  const onStopResize = (event: HandlerProps) => {
    setResizing(false);
    // 'name' is used to identify the Elements whose layout is stored.
    const { name, flex } = event.component.props;

    // onStopResize can be called multiple times before the state changes, so
    // we need an updater function to ensure all updates are applied.
    setLayout(l => {
      const newLayout = name ? { ...l, [name]: { flex } } : l;
      store.set(REFLEX_LAYOUT, newLayout);
      return newLayout;
    });
  };

  const setHtmlHeight = () => {
    const vh = String(window.innerHeight - 1);
    document.documentElement.style.height = vh + 'px';
  };
  const onResize = () => {
    setResizing(true);
  };

Review comment (suggestion):
```suggestion
  const onPreviewResize = () => xtermFitRef.current?.fit();
```

Code after:
    challengeTypes.html,
    challengeTypes.modern,
    challengeTypes.multifileCertProject,
    challengeTypes.multifilePythonCertProject,
    challengeTypes.python,
    challengeTypes.lab
  ].includes(challengeType);
  const getLayoutState = () => {
    const reflexLayout = store.get(REFLEX_LAYOUT) as ReflexLayout | null;

    // Check that the layout values stored are valid (exist in base layout). If
    // not valid, it will fallback to the base layout values and be set on next
    // user resize.
    const isValidLayout =
      reflexLayout &&
      isContained(Object.keys(BASE_LAYOUT), Object.keys(reflexLayout));

    if (!isValidLayout) store.remove(REFLEX_LAYOUT);

    return isValidLayout ? reflexLayout : BASE_LAYOUT;
  };

  const onPreviewResize = () => xtermFitRef.current?.fit();

  // layout: Holds the information of the panes sizes for desktop view
  const [layout, setLayout] = useState(getLayoutState());

  const onStopResize = (event: HandlerProps) => {
    setResizing(false);
    // 'name' is used to identify the Elements whose layout is stored.
    const { name, flex } = event.component.props;

    // onStopResize can be called multiple times before the state changes, so
    // we need an updater function to ensure all updates are applied.
    setLayout(l => {
      const newLayout = name ? { ...l, [name]: { flex } } : l;
      store.set(REFLEX_LAYOUT, newLayout);
      return newLayout;
    });
  };

  const setHtmlHeight = () => {
    const vh = String(window.innerHeight - 1);
    document.documentElement.style.height = vh + 'px';
  };
  const onResize = () => {
    setResizing(true);
  };
  const resizeProps: ResizeProps = {
    onResize,
    onStopResize