Merge pull request #59 from MobilityData/copilot/fix-issue-52-bug

Fix country flag emojis not rendering on Microsoft Edge/Windows

Author: Alessandro100

package.json

@@ -21,6 +21,7 @@
     "@vercel/speed-insights": "^1.3.1",
     "axios": "^1.7.2",
     "countries-list": "^3.1.1",
+    "country-flag-emoji-polyfill": "^0.1.8",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "export-to-csv": "^1.3.0",

public/fonts/TwemojiCountryFlags.woff2

@@ -56,7 +56,10 @@ export enum ThemeModeEnum {
 }
 
 export const fontFamily = {
-  primary: 'var(--font-mulish)',
+  // "Twemoji Country Flags" is loaded via a polyfill (polyfillCountryFlagEmojis in providers.tsx)
+  // and uses unicode-range: U+1F1E6-1F1FF, so it only applies to flag emoji code points
+  // and does not affect any other text rendering.
+  primary: '"Twemoji Country Flags", var(--font-mulish)',
   secondary: 'var(--font-ibm-plex-mono)',
 };
 

src/app/Theme.ts

@@ -9,6 +9,7 @@ import { type RemoteConfigValues } from './interface/RemoteConfig';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { AuthSessionProvider } from './components/AuthSessionProvider';
+import { polyfillCountryFlagEmojis } from 'country-flag-emoji-polyfill';
 
 interface ProvidersProps {
   children: React.ReactNode;
@@ -20,6 +21,15 @@ export function Providers({
   children,
   remoteConfig,
 }: ProvidersProps): React.ReactElement {
+  // Polyfill country flag emojis for browsers that don't support them natively
+  // (e.g. Microsoft Edge / Chrome on Windows)
+  React.useEffect(() => {
+    polyfillCountryFlagEmojis(
+      'Twemoji Country Flags',
+      '/fonts/TwemojiCountryFlags.woff2',
+    );
+  }, []);
+
   // Start MSW in mock mode to intercept API calls client-side
   React.useEffect(() => {
     if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {

src/app/providers.tsx

@@ -5763,6 +5763,11 @@ countries-list@^3.1.1:
   resolved "https://registry.yarnpkg.com/countries-list/-/countries-list-3.2.2.tgz#34ded4d3c8ebe715306cb5658c34f73a0c8f01cb"
   integrity sha512-ABJ/RWQBrPWy+hRuZoW+0ooK8p65Eo3WmUZwHm6v4wmfSPznNAKzjy3+UUYrJK2v3182BVsgWxdB6ROidj39kw==
 
+country-flag-emoji-polyfill@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/country-flag-emoji-polyfill/-/country-flag-emoji-polyfill-0.1.8.tgz#d2cfb23dd2f949b80d83eb9822b613bf62957173"
+  integrity sha512-Mbah52sADS3gshUYhK5142gtUuJpHYOXlXtLFI3Ly4RqgkmPMvhX9kMZSTqDM8P7UqtSW99eHKFphhQSGXA3Cg==
+
 crc-32@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.2.tgz#3cad35a934b8bf71f25ca524b6da51fb7eace2ff"