+3 -1

src/components/CardSymbol.tsx

reviewed

··· 17 17 text: "h-[1.1em] w-[1.1em]", 18 18 }; 19 19 20 20 + const SYMBOL_SHADOW = "drop-shadow-[_-1px_1px_0_rgba(0,0,0,0.85)]"; 21 21 + 20 22 export function CardSymbol({ 21 23 symbol, 22 24 size = "medium", ··· 29 31 <img 30 32 src={`/symbols/${normalizedSymbol}.svg`} 31 33 alt={symbol} 32 32 - className={`${SIZE_CLASSES[size]} ${className ?? ""}`} 34 34 + className={`${SIZE_CLASSES[size]} ${SYMBOL_SHADOW} ${className ?? ""}`} 33 35 title={symbol} 34 36 /> 35 37 );

+2 -2

src/components/OracleText.test.tsx

reviewed

··· 40 40 expect(symbols[0].getAttribute("src")).toBe("/symbols/rw.svg"); 41 41 }); 42 42 43 43 - it("uses align-middle class for proper alignment", () => { 43 43 + it("uses em-based vertical alignment for proper baseline alignment", () => { 44 44 const { container } = render(<OracleText text="Pay {G}." />); 45 45 const symbol = container.querySelector("img"); 46 46 - expect(symbol?.className).toContain("align-middle"); 46 46 + expect(symbol?.className).toContain("align-[-0.125em]"); 47 47 }); 48 48 }); 49 49

+1 -1

src/components/OracleText.tsx

reviewed

··· 111 111 key={i} 112 112 symbol={part.content} 113 113 size={symbolSize} 114 114 - className="inline align-middle mx-0.5" 114 114 + className="inline align-[-0.125em] mx-0.5" 115 115 /> 116 116 ); 117 117 }