From eea6b0f0e138119d4eadcec8df0e37b0d1daf354 Mon Sep 17 00:00:00 2001
From: Daniel Palafox <daniel.p4l4fox@gmail.com>
Date: Wed, 13 Mar 2024 12:05:03 -0600
Subject: [PATCH] style: Fix mobile version margins

---
 .../form-authorize/form-authorize.component.html     | 12 +++++++++---
 .../form-authorize/form-authorize.component.scss     |  5 +++++
 .../form-authorize/form-authorize.component.ts       |  8 +++++++-
 .../pages/authorize/authorize.component.html         |  2 +-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.html b/src/app/authorize/components/form-authorize/form-authorize.component.html
index 7fff3f07b9..1e702ffb89 100644
--- a/src/app/authorize/components/form-authorize/form-authorize.component.html
+++ b/src/app/authorize/components/form-authorize/form-authorize.component.html
@@ -176,8 +176,11 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
         You are currently signed in as:
       </p>
       <mat-divider class="orcid-divider"></mat-divider>
-      <div class="row">
-        <div class="col l3 profile-icon-wrapper">
+      <div
+        class="row"
+        [ngClass]="{ 'center-content': platformInfo.columns4 }"
+      >
+        <div class="col l2 profile-icon-wrapper">
           <div class="icon">
             <mat-icon
               class="profile-icon"
@@ -188,7 +191,10 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
           </div>
         </div>
         <div class="col l9 user-wrapper">
-          <div class="row">
+          <div
+            class="row"
+            [ngClass]="{ 'center-content': platformInfo.columns4 }"
+          >
             <div class="m-b-8">
               <div class="mat-body-2">
                 <strong id="user-name">{{ userName }}</strong>
diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.scss b/src/app/authorize/components/form-authorize/form-authorize.component.scss
index 788396591c..1e3390133f 100644
--- a/src/app/authorize/components/form-authorize/form-authorize.component.scss
+++ b/src/app/authorize/components/form-authorize/form-authorize.component.scss
@@ -93,6 +93,7 @@ mat-card-content.authorize-content {
 
   div.profile-icon-wrapper {
     padding: 0 !important;
+    margin-right: 16px;
   }
 
   div.user-wrapper {
@@ -118,4 +119,8 @@ mat-card-content.authorize-content {
   .user-links {
     width: 100%;
   }
+
+  .center-content {
+    justify-content: center;
+  }
 }
diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.ts b/src/app/authorize/components/form-authorize/form-authorize.component.ts
index 9da888b519..18d0113b7c 100644
--- a/src/app/authorize/components/form-authorize/form-authorize.component.ts
+++ b/src/app/authorize/components/form-authorize/form-authorize.component.ts
@@ -2,7 +2,7 @@ import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { forkJoin, Observable, Subject } from 'rxjs'
 import { catchError, map, take, takeUntil } from 'rxjs/operators'
-import { PlatformInfoService } from 'src/app/cdk/platform-info'
+import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { WINDOW } from 'src/app/cdk/window'
 import { ApplicationRoutes } from 'src/app/constants'
 import { UserService } from 'src/app/core'
@@ -42,6 +42,7 @@ export class FormAuthorizeComponent implements OnInit, OnDestroy {
 
   oauthRequest: RequestInfoForm
   trustedIndividuals: TrustedIndividuals
+  platformInfo: PlatformInfo
 
   authorizeAccessFor = $localize`:@@authorize.authorizeAccessFor:Authorize access for`
   orcid = $localize`:@@authorize.dashOrcid:- ORCID`
@@ -58,6 +59,11 @@ export class FormAuthorizeComponent implements OnInit, OnDestroy {
     private _trustedIndividuals: TrustedIndividualsService,
     private _titleService: Title
   ) {
+    this._platformInfo
+    .get()
+    .pipe(take(1))
+    .subscribe((platform) => this.platformInfo = platform)
+
     this._user
       .getUserSession()
       .pipe(
diff --git a/src/app/authorize/pages/authorize/authorize.component.html b/src/app/authorize/pages/authorize/authorize.component.html
index 8451219152..d49f473890 100644
--- a/src/app/authorize/pages/authorize/authorize.component.html
+++ b/src/app/authorize/pages/authorize/authorize.component.html
@@ -13,7 +13,7 @@
             'orcid-wizard-2': !signInUpdatesV1Togglz,
             'orcid-wizard': signInUpdatesV1Togglz,
             'authorize-wrapper': signInUpdatesV1Togglz,
-            mobile: !platform.columns12
+            mobile: platform.columns4
           }"
         >
           <app-form-authorize