google signup screen issue fix with use of ResizeObserver

[numericals-org]

Closes #12063

Technical

• Added ResizeObserver to detect iframe height changes
• Hide signup form and separator when IA login iframe expands (>200px)

Testing

1. Trigger IA login
2. Verify signup form hides when iframe expands

Screenshot

Blocker

• Not able to test locally due to dependency on Internet Archive third-party login iframe behavior.

Stakeholders

@mekarpeles @cdrini

[RayBB]

Please remove all the spacing (whitespace) changes in this PR. Thank you.

[RayBB]

There are still some white space changes. Could you please try to remove them and remove the changes to Semicolons too.

[RayBB]

Please remove all the changes that aren't absolutely needed for the PR.

Additionally @lokesh do you think there's a different way we should do this? It seems a little brittle with all the hard coded IDs but I'm not sure what the alternative is when dealing with iframes.

[lokesh]

Some feedback from AI review:

Problem

ResizeObserver won't work on a cross-origin iframe
This is the critical problem. The ia-third-party-logins iframe loads from archive.org (see ia_thirdparty_logins.html:6), which is a different origin. ResizeObserver observes element dimensions in the current document's layout, but the iframe element has a hardcoded height: 44px in its inline style. The iframe's own height in the parent DOM won't change unless something explicitly resizes it — the content inside the iframe expanding does not cause the <iframe> element itself to grow. So entries[0].contentRect.height will always report ~44px, and the > 200 condition will never be true.

Solution

IA already sends postMessage events to OL, and OL already listens for them:

1. resize — IA tells OL to resize the iframe. This is what causes the overlap — the iframe grows but
   the form stays visible.
2. s3-keys — IA sends S3 credentials after successful auth. OL then auto-submits the login form,
   which should redirect the user.

So the flow is: Google auth completes → IA sends s3-keys → OL submits the login form → page
redirects. The problem is likely the "Welcome to Internet Archive" screen that appears between the
Google auth completing and the s3-keys message arriving. During that gap, the iframe gets resized
(via the resize message) to show the welcome screen, overlapping the signup form.

The fix is simple — hide the form and separator when a resize message makes the iframe taller. The
infrastructure is already there. We just need to add a few lines to the existing handleMessageEvent

function:

if (e.data.type === 'resize') {
element.setAttribute('scrolling', 'no');
if (e.data.height) element.style.height = ${e.data.height}px;

  // Hide signup form when iframe expands (e.g. welcome screen after OAuth)                       
  if (e.data.height > 200) {                                                                      
      document.querySelector('form[name="signup"]')?.classList.add('hidden');                     
      document.querySelector('.ol-signup-form__big-or')?.classList.add('hidden');
  }                                                                                               

}

---

I would love to for us to be able to ditch iframe for a classic OAuth link flow, but that would require coordination w/IA.

[lokesh]

See my prev comment