fix: preserve medal proportions in Firefox

Author: jmgasper

src/apps/opportunities/src/components/OpportunityListCard.module.scss

@@ -273,12 +273,6 @@
     gap: 4px;
     white-space: nowrap;
 
-    svg {
-        flex: 0 0 16px;
-        height: 14.4px;
-        width: 11.2px;
-    }
-
     strong {
         font-family: 'Nunito Sans', sans-serif;
         font-size: 16px;
@@ -287,6 +281,23 @@
     }
 }
 
+.medalIcon {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 16px;
+    height: 16px;
+    justify-content: center;
+    overflow: hidden;
+    width: 16px;
+
+    svg {
+        display: block;
+        flex: none;
+        height: 90%;
+        width: 70%;
+    }
+}
+
 .morePrizes {
     align-items: center;
     background: #f5f7fa;

src/apps/opportunities/src/components/OpportunityListCard.spec.tsx

@@ -98,6 +98,13 @@ describe('OpportunityListCard competition presentation', () => {
         expect(within(prizes)
             .getByText('+1'))
             .toBeInTheDocument()
+        const firstMedal = within(prizes)
+            .getByText('$1000')
+            .previousElementSibling
+        expect(firstMedal)
+            .toHaveClass('medalIcon')
+        expect(firstMedal?.querySelector('svg'))
+            .toBeInTheDocument()
         expect(screen.queryByText('Prize:'))
             .not.toBeInTheDocument()
 

src/apps/opportunities/src/components/OpportunityListCard.tsx

@@ -308,7 +308,9 @@ function renderChallengePrizes(prizes: ChallengePlacementPrize[]): ReactNode {
                 const MedalIcon = medalIcons[prize.placement - 1] ?? MedalThirdIcon
                 return (
                     <span className={styles.prize} key={`placement-${prize.placement}`}>
-                        <MedalIcon aria-hidden='true' />
+                        <span aria-hidden='true' className={styles.medalIcon}>
+                            <MedalIcon />
+                        </span>
                         <strong>{formatPrize(prize)}</strong>
                     </span>
                 )