Padding around elements in /oauth2/authorize login UI

This is what it used to look like:

I say "it", but "it" is a different thing to the "it" from before: here, it's the "/1/connect_login" endpoint from the v1 API, whereas further above, it's the "/oauth2/authorize" endpoint from the v2 API.

I've just realised something else: on iPhone it looks fine, albeit different from the v1 endpoint styling:

Are you serving different pages to the iPad and iPhone, on the basis that the iPad's screen is wide enough to show the desktop version, and that the iOS SDK presents the login page in a modal form view?

If so, please ask your team to change that. It's tempting to think that the User-Agent gives you information about the context in which the page will be displayed, but that's not the case. It used to be that you could assume fullscreen presentation on an iPad, but that's no longer true: modern iPads can now run different apps split-screen. You now need to take a "responsive" approach, i.e. layout differently according to the width of the browser "window": the "desktop" version of the page should reflow to a compact layout when the user resizes their "desktop" browser window below a certain width, and there should be no "mobile version" of the page.