Improve wrapping of candidate rating ticks

php-template/template.php

@@ -56,6 +56,14 @@
                                 } else {
                                     $candidate_image = $media['default.png'];
                                 }
+
+                                $candidate_rating = str_repeat("✔️", min(5, $candidate['Rating']));
+                                $candidate_rating_colour = "green";
+
+                                // If string is 5 ticks, insert a zero width space between the 3rd and 4th ticks so that it wraps nicer
+                                if ($candidate_rating == "✔️✔️✔️✔️✔️") {
+                                    $candidate_rating = "✔️✔️✔️​✔️✔️";
+                                }
                             ?>
 
                             <!-- wp:image {"id":<?php echo $candidate_image['id']; ?>,"width":"200px","height":"200px","scale":"cover","align":"center","style":{"color":{}},"className":"is-resized"} -->
@@ -67,7 +75,7 @@
                             <!-- /wp:heading -->
 
                             <!-- wp:paragraph {"align":"center","style":{"layout":{"selfStretch":"fit","flexSize":null},"typography":{"lineHeight":"1"},"spacing":{"margin":{"top":"0.5rem","bottom":"1.5rem"}}},"fontSize":"large"} -->
-                            <p class="has-text-align-center has-large-font-size" style="margin-top:0.5rem;margin-bottom:1.5rem;line-height:1;color: rgba(100%, 0%, 0%, 0);text-shadow: 0 0 0 green;"><?php echo str_repeat("✔️", $candidate['Rating']); ?></p>
+                            <p class="has-text-align-center has-large-font-size" style="margin-top:0.5rem;margin-bottom:1.5rem;line-height:1;color: rgba(100%, 0%, 0%, 0);text-shadow: 0 0 0 <?php echo $candidate_rating_colour; ?>;"><?php echo $candidate_rating; ?></p>
                             <!-- /wp:paragraph -->
                         <?php endif; ?>