From 740604b2807c0b48dda41ad31fde0402adb5dcdb Mon Sep 17 00:00:00 2001
From: Fabrice LAMANT <fabrice.lamant@gmail.com>
Date: Thu, 5 Feb 2026 16:59:50 +0100
Subject: [PATCH] add nocs to live events page

---
 ui/app/flag.tsx |  5 +++--
 ui/app/page.tsx | 25 ++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/ui/app/flag.tsx b/ui/app/flag.tsx
index 5db07ebbf..6486b4131 100644
--- a/ui/app/flag.tsx
+++ b/ui/app/flag.tsx
@@ -1,4 +1,4 @@
-export default function Flag({ iso3, name }: { iso3: string; name: string }) {
+export default function Flag({ iso3, name, size }: { iso3: string; name: string, size?: "sm" }) {
 
   const iso3to2: { [key: string]: string } = {
     AFG: "AF",
@@ -259,9 +259,10 @@ export default function Flag({ iso3, name }: { iso3: string; name: string }) {
 
   const iso2 = (iso3to2[iso3.toUpperCase()] || "").toLowerCase();
 
+  const className = size === "sm" ? 'inline-block h-3 mr-1' : 'inline-block h-5 mr-1 border-1 border-gray-300';
   return <img
     alt={name}
-    className="inline-block mr-1 h-5 border-1 border-gray-300"
+    className={className}
     src={`https://gstatic.olympics.com/s3/noc/oly/3x2/${iso3.toUpperCase()}.png`}
     title={name}
   />
diff --git a/ui/app/page.tsx b/ui/app/page.tsx
index ac47cc6dd..181e5e003 100644
--- a/ui/app/page.tsx
+++ b/ui/app/page.tsx
@@ -283,20 +283,39 @@ export default function Home() {
                   );
                 }
 
+                let nocs = <></>;
+                if (event.nocs.length > 0 && event.competitors.length !== 2) {
+                  nocs = (
+                    <div>
+                      {
+                        event.nocs.toSorted((a, b) => a.localeCompare(b)).map((nocKey) => {
+                          const noc = data.nocs.find(noc => noc.key === nocKey);
+                          if (!noc) return null;
+                          return (
+                            <Flag key={nocKey} iso3={noc.key} name={translate(noc.name)} size="sm" />
+                          );
+                        })
+                      }
+                    </div>
+                  );
+                }
+
+
                 return (
                   <div key={event.key}>
                     {dayHeader}
-                    <div className="p-2 m-2 my-4 bg-white rounded-md md:w-3/4 md:mx-auto">
-                      <div className={`fg-${getColor(i)} ${suseMono.className} text-right font-bold align-top inline-block tabular-nums pr-2`}>
+                    <div className="flex p-2 m-2 my-4 bg-white rounded-md md:w-3/4 md:mx-auto">
+                      <div className={`flex-none fg-${getColor(i)} ${suseMono.className} text-right font-bold align-top inline-block tabular-nums pr-2`}>
                         <span className="text-xl">{startHours}:{startMinutes}</span>
                         <div className="text-xs">{endHours}:{endMinutes}</div>
                       </div>
-                      <div className="align-top inline-block text-black pl-2 border-l border-slate-900/10">
+                      <div className="shrink align-top inline-block text-black pl-2 border-l border-slate-900/10">
                         <div className="font-bold">
                           {translate(data.sports.find(sport => sport.key === event.sport)?.name || {})}
                         </div>
                         <div className={`inline-block font-bold text-sm ${titleColor}`}>{translate(event.name)}</div>
                         {competitors}
+                        {nocs}
                       </div>
                     </div>
                   </div>