How can I reset clientHeight after exiting to an external browser?

Exiting to an external browser is shrinking clientHeight and causing height inconsistencies. How can I reset it? The value is read-only, and I tried to set the body, but it didn’t fix the issue. I also don’t want to reload the page. I started working on this hook that should reset the client height, but it isn’t working.

const useBodyMinHeight = (location: 'home' | 'loading' | 'application') => {
  const viewportHeight = `${window.innerHeight}px`;
  const setBodyMinHeight = (location: 'home' | 'loading' | 'application') => {
    // document.body.style.backgroundColor = '#E4D00A'; // <--- Debugging color

    // Forces reflow
    void document.body.offsetHeight;
    void document.body.clientHeight;
    void document.body.scrollHeight;
    void document.body.offsetHeight;

    // Warning clientHeight is causing the body to be too small
    const targetContainer = document.getElementById(location);
    if (targetContainer) {
      document.body.style.height = viewportHeight;
      targetContainer.style.height = viewportHeight;
      targetContainer.style.minHeight = viewportHeight;
    }
  };

  if (isStandaloneMode()) {
    setBodyMinHeight(location);
  }

  useLayoutEffect(() => {
    if (isStandaloneMode()) {
      setBodyMinHeight(location);
      window.addEventListener('focus', () => setBodyMinHeight(location));
      window.addEventListener('resize', () => setBodyMinHeight(location));

      const { orientation } = window.screen;

      if (orientation) {
        orientation.addEventListener('change', () => setBodyMinHeight(location));
      }
    }
  }, [location]);
};

export default useBodyMinHeight;