Make default vertical alignment for PieChart legend to be center

- Fix key figure width in the country 3W

Author: frozenhelium

src/components/PieChart/styles.module.css

@@ -2,6 +2,7 @@
     display: flex;
     flex-wrap: wrap;
     gap: var(--go-ui-spacing-md);
+    align-items: center;
 
     .legend {
         display: flex;

src/views/CountryThreeWNationalSocietyProjects/styles.module.css

@@ -23,8 +23,7 @@
 
             .separator {
                 flex-shrink: 0;
-                background-color: var(--go-ui-color-separator);
-                width: var(--go-ui-width-separator-sm);
+                border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
             }
 
             .pie-chart-container {

src/views/CountryThreeWProjects/index.tsx

@@ -385,6 +385,7 @@ export function Component() {
                             <Container
                                 heading={strings.programmeType}
                                 headingLevel={5}
+                                className={styles.pieChartContainer}
                             >
                                 <PieChart
                                     className={styles.pieChart}
@@ -412,6 +413,7 @@ export function Component() {
                             <Container
                                 heading={strings.projectStatus}
                                 headingLevel={5}
+                                className={styles.pieChartContainer}
                             >
                                 <PieChart
                                     className={styles.pieChart}

src/views/CountryThreeWProjects/styles.module.css

@@ -23,15 +23,17 @@
 
             .separator {
                 flex-shrink: 0;
-                background-color: var(--go-ui-color-separator);
-                width: var(--go-ui-width-separator-sm);
+                border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
             }
 
-            .pie-chart {
+            .pie-chart-container {
                 flex-basis: 0;
                 flex-grow: 1;
-                flex-wrap: wrap;
-                justify-content: center;
+
+                .pie-chart {
+                    flex-wrap: wrap;
+                    justify-content: center;
+                }
             }
 
             .key-figure {