Move external login buttons above “Simple Sign Up” on my mobile signup page

Support
, ,
1

I’m trying to improve the mobile signup flow for https://physicswithethan.discourse.diy where some invited users should ideally use external authentication rather than the local email/password form.

At the moment, on mobile, /signup shows:

Simple Sign Up

Email
Username
Password

Sign Up

OR

I have a Nottingham College account
I have a Nova Education Trust account

The issue is that many school/college students are likely to arrive directly at /signup, for example from a QR code, invite page, or shared link. They may not naturally go to /login first.

So although the external login buttons are available, the first thing they see is the local “Simple Sign Up” form. In this case, that is not the preferred route. The preferred route is that they choose the relevant institutional Microsoft/SSO button.

What I would like on mobile is something closer to:

I have a Nottingham College account
I have a Nova Education Trust account

OR

Simple Sign Up

Email
Username
Password

Sign Up

I understand that this is mainly a visual ordering issue, and that a theme component may be the right place to handle it.

Would something like this be the correct approach?

.signup-page .signup-body {
  display: flex;
  flex-direction: column;
}

.signup-page .login-right-side {
  order: -3;
  margin-bottom: 1rem;
}

.signup-page .login-or-separator {
  order: -2;
  margin: 1rem 0;
}

My questions are:

  1. Is there a supported theme/component way to move the external auth buttons above the local signup form on mobile?
  2. Are the relevant selectors stable enough for a theme component, or is there a better hook/class to target?
  3. Is there a cleaner way to make SSO the visually preferred path on /signup, without disabling local signup entirely?

I’m especially interested in the mobile case, because the external auth buttons can easily appear below the fold, while “Simple Sign Up” looks like the primary action.