Improve mobile team equipment layout

components/public/team-search.tsx

@@ -81,10 +81,10 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                         className="min-w-0 rounded-lg p-1 text-center sm:p-2"
                         style={{ backgroundColor: elementBackgroundColor(member.character.element) }}
                       >
-                        <div className="grid grid-cols-3 gap-2">
+                        <div className="flex flex-col gap-2 sm:grid sm:grid-cols-3">
                           <div
                             className={cn(
-                              "relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg bg-muted",
+                              "relative aspect-square min-h-0 overflow-hidden rounded-lg bg-muted sm:col-span-2 sm:row-span-2 sm:aspect-auto",
                               rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity),
                             )}
                           >
@@ -98,7 +98,7 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                               C{member.constellation}
                             </Kbd>
                           </div>
-                          <div className="col-span-1 row-span-2 flex min-w-0 flex-col gap-2">
+                          <div className="grid min-w-0 grid-cols-2 gap-2 sm:col-span-1 sm:row-span-2 sm:flex sm:flex-col">
                             {member.weapon ? (
                               <div
                                 className={cn(

lib/catalog/element.test.ts

@@ -3,19 +3,19 @@ import { describe, expect, it } from "vitest";
 import { elementBackgroundColor } from "@/lib/catalog/element";
 
 describe("catalog element backgrounds", () => {
-  it("maps every character element to its 20% opacity color", () => {
-    expect(elementBackgroundColor("Pyro")).toBe("#12000033");
-    expect(elementBackgroundColor("Hydro")).toBe("#00051233");
-    expect(elementBackgroundColor("Anemo")).toBe("#06141533");
-    expect(elementBackgroundColor("Electro")).toBe("#0D000F33");
-    expect(elementBackgroundColor("Dendro")).toBe("#000F0433");
-    expect(elementBackgroundColor("Cryo")).toBe("#03202133");
-    expect(elementBackgroundColor("Geo")).toBe("#0F0D0033");
+  it("maps every character element to its 40% opacity color", () => {
+    expect(elementBackgroundColor("Pyro")).toBe("#12000066");
+    expect(elementBackgroundColor("Hydro")).toBe("#00051266");
+    expect(elementBackgroundColor("Anemo")).toBe("#06141566");
+    expect(elementBackgroundColor("Electro")).toBe("#0D000F66");
+    expect(elementBackgroundColor("Dendro")).toBe("#000F0466");
+    expect(elementBackgroundColor("Cryo")).toBe("#03202166");
+    expect(elementBackgroundColor("Geo")).toBe("#0F0D0066");
   });
 
   it("uses the neutral character background when the element is unavailable", () => {
-    expect(elementBackgroundColor(null)).toBe("#17383d33");
-    expect(elementBackgroundColor(undefined)).toBe("#17383d33");
-    expect(elementBackgroundColor("Unknown")).toBe("#17383d33");
+    expect(elementBackgroundColor(null)).toBe("#17383d66");
+    expect(elementBackgroundColor(undefined)).toBe("#17383d66");
+    expect(elementBackgroundColor("Unknown")).toBe("#17383d66");
   });
 });

lib/catalog/element.ts

@@ -1,13 +1,13 @@
 const elementBackgroundColors: Record<string, string> = {
-  Pyro: "#12000033",
-  Hydro: "#00051233",
-  Anemo: "#06141533",
-  Electro: "#0D000F33",
-  Dendro: "#000F0433",
-  Cryo: "#03202133",
-  Geo: "#0F0D0033",
+  Pyro: "#12000066",
+  Hydro: "#00051266",
+  Anemo: "#06141566",
+  Electro: "#0D000F66",
+  Dendro: "#000F0466",
+  Cryo: "#03202166",
+  Geo: "#0F0D0066",
 };
 
 export function elementBackgroundColor(element: string | null | undefined): string {
-  return (element && elementBackgroundColors[element]) || "#17383d33";
+  return (element && elementBackgroundColors[element]) || "#17383d66";
 }