fix: Mobile style fixes and other small ui fixes

toju-app/src/app/shared/components/profile-card/profile-card-mobile.component.html

@@ -15,7 +15,7 @@
     class="h-24 bg-gradient-to-r from-primary/30 to-primary/10"
   ></div>
 
-  <div class="-mt-12 flex flex-col items-center px-6">
+  <div class="-mt-16 flex flex-col items-center px-6">
     <div class="relative">
       <button
         type="button"
@@ -26,7 +26,7 @@
         <app-user-avatar
           [name]="profileUser.displayName"
           [avatarUrl]="profileUser.avatarUrl"
-          size="xl"
+          size="2xl"
           [status]="profileUser.status"
           [showStatusBadge]="true"
           ringClass="ring-4 ring-card"
@@ -34,11 +34,11 @@
       </button>
       @if (isEditable) {
         <span
-          class="pointer-events-none absolute bottom-1 right-1 flex h-7 w-7 items-center justify-center rounded-full border-2 border-card bg-primary text-primary-foreground shadow"
+          class="pointer-events-none absolute bottom-2 right-2 flex h-9 w-9 items-center justify-center rounded-full border-2 border-card bg-primary text-primary-foreground shadow"
         >
           <ng-icon
             name="lucideCamera"
-            class="h-3.5 w-3.5"
+            class="h-4 w-4"
           />
         </span>
       }