working but sheet styling is ugly

src/features/badges/server.ts

@@ -1,5 +1,8 @@
 import { toServerResult } from "@/lib/tanstack-query/utils/to-server-result";
-import { superTokensAdminFunctionMiddleware, superTokensFunctionMiddleware } from "@/utils/supertokens";
+import {
+  superTokensAdminFunctionMiddleware,
+  superTokensFunctionMiddleware,
+} from "@/utils/supertokens";
 import { createServerFn } from "@tanstack/react-start";
 import { pbAdmin } from "@/lib/pocketbase/client";
 import { z } from "zod";
@@ -19,14 +22,17 @@ export const migrateBadgeProgress = createServerFn()
 
 export const getAllBadges = createServerFn()
   .middleware([superTokensFunctionMiddleware])
-  .handler(async () =>
-    toServerResult(() => pbAdmin.listBadges())
-  );
+  .handler(async () => 
+    toServerResult(() => pbAdmin.listBadges()));
+
+export const getAllEarnedBadges = createServerFn()
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async () => toServerResult(() => pbAdmin.listEarnedBadges()));
 
 export const awardManualBadge = createServerFn()
   .inputValidator(z.object({
-    playerId: z.string(),
-    badgeId: z.string(),
+      playerId: z.string(),
+      badgeId: z.string(),
   }))
   .middleware([superTokensAdminFunctionMiddleware])
   .handler(async ({ data }) =>