Fix info icon being stretched in the table

Author: frozenhelium

src/components/Table/HeaderCell/index.tsx

@@ -102,6 +102,7 @@ function HeaderCell(props: HeaderCellProps) {
             </div>
             {infoTitle && infoDescription && (
                 <InfoPopup
+                    className={styles.infoPopupIcon}
                     title={infoTitle}
                     description={infoDescription}
                 />

src/components/Table/HeaderCell/styles.module.css

@@ -10,6 +10,11 @@
     }
 
     .icon {
+        flex-shrink: 0;
         font-size: var(--go-ui-height-icon-multiplier);
     }
+
+    .info-popup-icon {
+        flex-shrink: 0;
+    }
 }

src/views/CountryRiskWatch/RiskBarChart/FoodInsecurityChart/index.tsx

@@ -291,6 +291,7 @@ function FoodInsecurityChart(props: Props) {
 
                         return (
                             <circle
+                                key={point.key}
                                 className={styles.averagePoint}
                                 cx={point.x}
                                 cy={point.y}
@@ -332,6 +333,7 @@ function FoodInsecurityChart(props: Props) {
 
                         return (
                             <circle
+                                key={point.x}
                                 className={styles.averagePoint}
                                 cx={point.x}
                                 cy={point.y}

src/views/CountryRiskWatch/RiskBarChart/styles.module.css

@@ -5,6 +5,10 @@
         flex-wrap: wrap;
         gap: var(--go-ui-spacing-md);
         grid-column: span 2;
+
+        @media screen and (max-width: 40rem) {
+            grid-column: unset;
+        }
     }
 
     .legend {

src/views/CountryRiskWatch/RiskTable/i18n.json

@@ -8,7 +8,7 @@
         "riskScoreVeryLowLabel": "Very low",
         "riskScoreNotApplicableLabel": "N/A",
         "riskTableHazardTypeTitle": "Hazard Type",
-        "riskTableInformTitle": "INFORM Risk Score",
+        "riskTableInformTitle": "Risk Score",
         "riskTableInformDescriptionP1": "These figures depict INFORM seasonal hazard exposure values for each country for each month on a five-point scale:",
         "riskTableInformDescriptionP2": "1: Very Low | 2: Low | 3: Medium | 4: High | 5: Very High.",
         "riskTableInformDescriptionP3": "More information on these values can be found {moreInfoLink}",

src/views/CountryRiskWatch/RiskTable/index.tsx

@@ -176,6 +176,7 @@ function RiskTable(props: Props) {
                 ),
                 {
                     headerInfoTitle: strings.riskTableInformTitle,
+                    // FIXME: add description for wildfire
                     headerInfoDescription: (
                         <div className={styles.informDescription}>
                             <div>