From 55a3614f996fd6f0b9d9bda0c638c03846b29877 Mon Sep 17 00:00:00 2001
From: Sakura Akeno Isayeki <sakura.isayeki@nodsoft.net>
Date: Mon, 6 Nov 2023 10:03:45 +0100
Subject: [PATCH] feat(profile): Update profile component display elements

- Added a CSS class to the <h1> element for styling purposes
- Adjusted spacing and alignment of elements within the <h1> element
- Updated the positioning and styling of the total karma display

These changes improve the visual presentation of the player profile in the application.
---
 .../app/pages/player/profile/profile.component.html    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/wowskarma.app/src/app/pages/player/profile/profile.component.html b/wowskarma.app/src/app/pages/player/profile/profile.component.html
index 37eeea0..93387c5 100644
--- a/wowskarma.app/src/app/pages/player/profile/profile.component.html
+++ b/wowskarma.app/src/app/pages/player/profile/profile.component.html
@@ -1,9 +1,9 @@
 <ng-container *ngIf="request$ | async as result else loading">
   <ng-container *ngIf="result.model as profile else notFound">
     <div class="text-center mb-5">
-      <h1>
+      <h1 class="d-inline-flex flex-row">
         <ng-container *ngIf="profile.clan?.clanInfo as clan">
-          <div class="d-inline-flex flex-row pe-1 pb-2">
+          <div class="pe-1 pb-2">
             <icon-clan-rank [clanRank]="profile.clan?.clanMemberRole" class="pe-1"></icon-clan-rank>
           </div>
 
@@ -13,11 +13,11 @@ <h1>
           >[{{clan.tag}}]</a>
         </ng-container>
 
-        <span class="mx-3">{{profile.username}}</span>
+        <span class="mx-lg-3 mx-2">{{profile.username}}</span>
 
-        <ng-container *ngIf="profileTotalKarma$ | async as profileTotalKarma">
+        <div *ngIf="profileTotalKarma$ | async as profileTotalKarma">
           <sup class="text-{{profileTotalKarma | karmaColor}}" ngbTooltip="Total Karma" placement="bottom">{{profileTotalKarma}}</sup>
-        </ng-container>
+        </div>
       </h1>
 
       <div class="h1">