From: Chocobozzz <me@florianbigard.com>
Date: Fri, 27 Aug 2021 07:30:32 +0000 (+0200)
Subject: Avoid layout shift in account setup modal
X-Git-Tag: v3.4.0-rc.1~45
X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=1ff15061b31245df4248e47228d0a90b07ab3f01;hp=bf80903fde923e0c84226ac442a2a382db74aee4;p=github%2FChocobozzz%2FPeerTube.git

Avoid layout shift in account setup modal
---

diff --git a/client/src/app/modal/account-setup-modal.component.html b/client/src/app/modal/account-setup-modal.component.html
index 55bae78bf..d1f153835 100644
--- a/client/src/app/modal/account-setup-modal.component.html
+++ b/client/src/app/modal/account-setup-modal.component.html
@@ -5,7 +5,7 @@
   </div>
 
   <div class="modal-body">
-    <img class="mascot" src="/client/assets/images/mascot/happy.svg" alt="mascot">
+    <img class="mascot" src="/client/assets/images/mascot/happy.svg" alt="">
 
     <div i18n class="subtitle">It's time to set up your account profile!</div>
 
diff --git a/client/src/app/modal/account-setup-modal.component.scss b/client/src/app/modal/account-setup-modal.component.scss
index 405f29d65..d99edaf7a 100644
--- a/client/src/app/modal/account-setup-modal.component.scss
+++ b/client/src/app/modal/account-setup-modal.component.scss
@@ -17,7 +17,8 @@
   @include margin-right(2rem);
 
   display: block;
-  min-width: 170px;
+  width: 170px;
+  height: 220px;
 }
 
 .subtitle {
diff --git a/client/src/app/modal/account-setup-modal.component.ts b/client/src/app/modal/account-setup-modal.component.ts
index 8256f5103..4cb8de2c7 100644
--- a/client/src/app/modal/account-setup-modal.component.ts
+++ b/client/src/app/modal/account-setup-modal.component.ts
@@ -45,11 +45,12 @@ export class AccountSetupModalComponent implements OnInit {
 
   ngOnInit () {
     this.serverConfig = this.serverService.getHTMLConfig()
-    this.user = this.authService.getUser()
 
     this.authService.userInformationLoaded
       .subscribe(
         () => {
+          this.user = this.authService.getUser()
+
           if (this.isUserRoot) return
           if (this.hasAccountAvatar && this.hasAccountDescription) return
           if (this.userService.hasSignupInThisSession()) return