Improve login form tabbing (#36736)

**Related issue:** Resolves #36735 

Fixed the order of tabbing on the log in page while maintaining update
styling:

![ezgif-2a83bf92c68732c0](https://github.com/user-attachments/assets/f4a6b3ea-0e03-42c4-83da-407bf24eee8b)

- [x] Changes file added for user-visible changes in `changes/`
- [x] QA'd all new/changed functionality manually

changes/36735-improved-login-form-tabbability

@@ -0,0 +1 @@
+- Fixed the tab order of elements in the login form

frontend/components/forms/LoginForm/LoginForm.tsx

@@ -175,24 +175,24 @@ const LoginForm = ({
           value={formData.password}
           onChange={onInputChange("password")}
         />
-        <div className={`${baseClass}__forgot-link`}>
-          <CustomLink
-            className={`${baseClass}__forgot-link`}
-            url={paths.FORGOT_PASSWORD}
-            text="Forgot password?"
-          />
-        </div>
       </div>
       {/* Actions displayed using CSS column-reverse to preserve tab order */}
-      <div className={`${baseClass}__login-actions`}>
-        <Button
-          className={`${baseClass}__login-btn`}
-          isLoading={isSubmitting}
-          type="submit"
-        >
-          Log in
-        </Button>
-        {ssoEnabled && renderSingleSignOnButton()}
+      <div className={`${baseClass}__actions`}>
+        <div className={`${baseClass}__login-actions`}>
+          <Button
+            className={`${baseClass}__login-btn`}
+            isLoading={isSubmitting}
+            type="submit"
+          >
+            Log in
+          </Button>
+          {ssoEnabled && renderSingleSignOnButton()}
+        </div>
+        <CustomLink
+          className={`${baseClass}__forgot-link`}
+          url={paths.FORGOT_PASSWORD}
+          text="Forgot password?"
+        />
       </div>
     </form>
   );

frontend/components/forms/LoginForm/_styles.scss

@@ -17,7 +17,7 @@
     vertical-align: middle;
   }
 
-  &__login-actions,
+  &__actions,
   &__form {
     display: flex;
     flex-direction: column;
@@ -26,20 +26,24 @@
 
   // Login button styles
   // Login and SSO button widths will always be equal
-  // Min of 208px with login-button widening if SSO button is wider
-  &__login-actions {
-    max-width: min-content;
+  &__actions {
     align-items: center;
     align-self: center;
+    flex-direction: column-reverse;
   }
 
-  &__login-btn {
-    min-width: 100%;
+  &__login-actions {
+    display: flex;
+    flex-direction: column;
+    gap: $gap-form;
+    width: px-to-rem(228);
+  }
+
+  &__forgot-link {
+    align-self: flex-start;
   }
 
   &__sso-btn.button {
-    min-width: 208px; // Must override form's .button specificity
-    width: max-content;
     border: 1px solid $core-fleet-black;
     white-space: nowrap;
   }