Fix login button widths, fixes #287

felixbrucker · Feb 4, 2024 · 644d1d3 · 644d1d3
1 parent dc4198e
commit 644d1d3
Showing 1 changed file with 22 additions and 16 deletions.
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
@@ -1,28 +1,34 @@
 <div class="row justify-content-center" style="margin-top: 4em">
-  <div class="col col-6">
+  <div class="col col-12">
     <div class="row justify-content-center" style="font-size: 24px">
       Log in to Chia-Dashboard
     </div>
     <div class="row justify-content-center" style="margin-top: 1em" *ngIf="isGoogleEnabled">
-      <a href="{{googleAuthUrl}}" style="text-decoration: none;">
-        <div class="oauth-provider-button google-button">
-          <fa-icon [icon]="faGoogle" class="fa" style="font-size: 18px"></fa-icon>&nbsp;&nbsp;Continue with Google
-        </div>
-      </a>
+      <div style="max-width: 25em">
+        <a href="{{googleAuthUrl}}" style="text-decoration: none;">
+          <div class="oauth-provider-button google-button">
+            <fa-icon [icon]="faGoogle" class="fa" style="font-size: 18px"></fa-icon>&nbsp;&nbsp;Continue with Google
+          </div>
+        </a>
+      </div>
     </div>
     <div class="row justify-content-center" style="margin-top: 1em" *ngIf="isDiscordEnabled">
-      <a href="{{discordAuthUrl}}" style="text-decoration: none;">
-        <div class="oauth-provider-button discord-button">
-          <fa-icon [icon]="faDiscord" class="fa" style="font-size: 18px; vertical-align: top"></fa-icon>&nbsp;&nbsp;Continue with Discord
-        </div>
-      </a>
+      <div style="max-width: 25em">
+        <a href="{{discordAuthUrl}}" style="text-decoration: none;">
+          <div class="oauth-provider-button discord-button">
+            <fa-icon [icon]="faDiscord" class="fa" style="font-size: 18px; vertical-align: top"></fa-icon>&nbsp;&nbsp;Continue with Discord
+          </div>
+        </a>
+      </div>
     </div>
     <div class="row justify-content-center" style="margin-top: 1em" *ngIf="isGithubEnabled">
-      <a href="{{githubAuthUrl}}" style="text-decoration: none;">
-        <div class="oauth-provider-button github-button">
-          <fa-icon [icon]="faGithub" class="fa" style="font-size: 18px"></fa-icon>&nbsp;&nbsp;Continue with GitHub
-        </div>
-      </a>
+      <div style="max-width: 25em">
+        <a href="{{githubAuthUrl}}" style="text-decoration: none;">
+          <div class="oauth-provider-button github-button">
+            <fa-icon [icon]="faGithub" class="fa" style="font-size: 18px"></fa-icon>&nbsp;&nbsp;Continue with GitHub
+          </div>
+        </a>
+      </div>
     </div>
   </div>
 </div>