[frontend] Add birthday/location field icons and fix mobile alignment

Iceshrimp.Frontend/Components/ProfileInfo.razor

@@ -1,6 +1,7 @@
 @using Iceshrimp.Frontend.Localization
 @using Iceshrimp.Shared.Schemas.Web
 @using Microsoft.Extensions.Localization
+@using Iceshrimp.Assets.PhosphorIcons
 @inject IStringLocalizer<Localization> Loc;
 <div class="profile-info">
     @if (UserProfile.Bio != null)
@@ -10,20 +11,26 @@
         </div>
     }
     <div class="data">
-        @if (UserProfile.Location != null)
-        {
-            <div class="location field">
-                <span class="field-name">@Loc["Location"]</span>
-                <span class="field-value">@UserProfile.Location</span>
-            </div>
-        }
         @if (UserProfile.Birthday != null)
         {
             <div class="birthday field">
-                <span class="field-name">@Loc["Birthday"]</span>
+                <span class="field-name">
+                    <Icon Name="Icons.Balloon" Size="1.3em"/>
+                    @Loc["Birthday"]
+                </span>
                 <span class="field-value">@UserProfile.Birthday</span>
             </div>
         }
+        @if (UserProfile.Location != null)
+        {
+            <div class="location field">
+                <span class="field-name">
+                    <Icon Name="Icons.MapPin" Size="1.3em"/>
+                    @Loc["Location"]
+                </span>
+                <span class="field-value">@UserProfile.Location</span>
+            </div>
+        }
     </div>
     @if (UserProfile.Fields != null)
     {

Iceshrimp.Frontend/Components/ProfileInfo.razor.css

@@ -25,6 +25,10 @@
         .field-name {
             font-weight: 600;
             width: 10rem;
+            
+            .ph {
+                vertical-align: text-bottom;
+            }
         }
     }
 }
@@ -39,3 +43,9 @@
         font-weight: 600;
     }
 }
+
+@media (max-width: 640px) {
+    ::deep .field {
+        flex-direction: column;
+    }
+}