fix some styles

frontend/src/styles/friends.scss

@@ -11,6 +11,7 @@
       border-spacing: 0;
       border-collapse: collapse;
       color: var(--text-color);
+      --padding: 1em 1.5rem;
 
       thead {
         color: var(--sub-color);
@@ -29,7 +30,7 @@
       }
 
       td {
-        padding: 0.5rem 0.5rem;
+        padding: var(--padding);
         -webkit-appearance: unset;
 
         &.actions {

frontend/src/ts/pages/friends.ts

@@ -154,9 +154,9 @@ function buildFriendRow(entry: Friend): HTMLTableRowElement {
           </div>
         </td>
         <td>${formatAge(entry.addedAt, ["years", "days"])}</td>
-        <td aria-label="total xp: ${formatXp(
-          xpDetails.levelCurrentXp
-        )}" data-balloon-pos="top">
+        <td aria-label="total xp: ${
+          isSafeNumber(entry.xp) ? formatXp(entry.xp) : ""
+        }" data-balloon-pos="top">
           ${xpDetails.level}
         </td>
         <td aria-label="${testStats.completedPercentage}% (${
@@ -246,7 +246,7 @@ function formatPb(entry?: PersonalBest):
 }
 
 function formatStreak(length?: number, prefix?: string): string {
-  return length !== undefined
+  return isSafeNumber(length)
     ? `${prefix !== undefined ? prefix + " " : ""}${length} ${
         length === 1 ? "day" : "days"
       } `