From 52216994a2fcaee39724cc6c26f6a295174ad8ed Mon Sep 17 00:00:00 2001
From: Nuno Loureiro <loureironuno@gmail.com>
Date: Mon, 25 May 2026 11:36:37 +0100
Subject: [PATCH 1/5] fix(10years): remove unwanted shadow from tabs list

Closes #18269
---
 app/[locale]/10years/page.tsx | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/[locale]/10years/page.tsx b/app/[locale]/10years/page.tsx
index a9f7daaa87d..b1ec7a08647 100644
--- a/app/[locale]/10years/page.tsx
+++ b/app/[locale]/10years/page.tsx
@@ -96,7 +96,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
         </div>
 
         <div className="w-full px-4 py-8 md:px-8">
-          <div className="flex flex-col items-center gap-4 rounded-4xl bg-radial-a px-4 pt-8 lg:px-14 lg:pt-14">
+          <div className="rounded-4xl bg-radial-a flex flex-col items-center gap-4 px-4 pt-8 lg:px-14 lg:pt-14">
             <div className="flex flex-col gap-4 text-center">
               <h2 className="text-4xl font-black">
                 {t("page-10-year-livestream-title")}
@@ -117,12 +117,12 @@ const Page = async (props: { params: Promise<PageParams> }) => {
               defaultValue={Object.keys(tenYearEventRegions)[0]}
               className="w-full"
             >
-              <TabsList className="w-full flex-nowrap justify-start overflow-x-auto overflow-y-hidden rounded-none border-b-2 border-b-primary p-0">
+              <TabsList className="border-b-primary w-full flex-nowrap justify-start overflow-x-auto overflow-y-hidden rounded-none border-b-2 p-0 shadow-none">
                 {Object.entries(tenYearEventRegions).map(([key, data]) => (
                   <TabsTrigger
                     key={key}
                     value={key}
-                    className="border-0 whitespace-nowrap text-primary"
+                    className="text-primary whitespace-nowrap border-0"
                   >
                     {data.label}&nbsp;
                     <span className="text-sm">({data.events.length})</span>
@@ -157,8 +157,8 @@ const Page = async (props: { params: Promise<PageParams> }) => {
                             key={country}
                             className={cn("flex flex-col border-b px-4 py-6")}
                           >
-                            <h3 className="mb-2 flex items-center gap-2 text-2xl font-bold text-body-medium">
-                              <span className="flex min-h-6 min-w-6 items-center justify-center overflow-hidden rounded-full bg-primary-low-contrast">
+                            <h3 className="text-body-medium mb-2 flex items-center gap-2 text-2xl font-bold">
+                              <span className="bg-primary-low-contrast flex min-h-6 min-w-6 items-center justify-center overflow-hidden rounded-full">
                                 <Emoji
                                   text={countryEvents[0].countryFlag}
                                   className="scale-[1.75]"
@@ -170,7 +170,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
                               {countryEvents.map((event, index) => (
                                 <LinkBox
                                   key={index}
-                                  className="flex flex-col justify-between gap-2 rounded-lg p-2 hover:bg-background-highlight md:flex-row"
+                                  className="hover:bg-background-highlight flex flex-col justify-between gap-2 rounded-lg p-2 md:flex-row"
                                 >
                                   <div className="flex flex-col gap-2 md:flex-row md:items-center">
                                     <div>
@@ -206,7 +206,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
 
         <div
           id="torch-history"
-          className="my-32 flex w-full scroll-mt-32 flex-col bg-linear-to-b from-[#161A36] via-[#161A36] via-60% to-[#9C63F8] md:rounded-3xl"
+          className="bg-linear-to-b my-32 flex w-full scroll-mt-32 flex-col from-[#161A36] via-[#161A36] via-60% to-[#9C63F8] md:rounded-3xl"
         >
           <div className="p-8">
             <div className="relative">
@@ -224,13 +224,13 @@ const Page = async (props: { params: Promise<PageParams> }) => {
                     disablePictureInPicture
                     playsInline
                   />
-                  <div className="pointer-events-none absolute top-0 h-full w-full bg-[url('/images/10-year-anniversary/torch-overlay.png')] bg-contain bg-center bg-no-repeat select-none" />
+                  <div className="pointer-events-none absolute top-0 h-full w-full select-none bg-[url('/images/10-year-anniversary/torch-overlay.png')] bg-contain bg-center bg-no-repeat" />
                 </div>
               </div>
               {/* Curved text */}
               <Curved10YearsText
                 viewBox="0 0 356 186"
-                className="absolute top-0 left-1/2 h-min w-full max-w-[600px] -translate-x-1/2"
+                className="absolute left-1/2 top-0 h-min w-full max-w-[600px] -translate-x-1/2"
                 width="100%"
                 height="auto"
               />
@@ -239,7 +239,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
 
           <TorchHistorySwiper holders={torchHolders} />
 
-          <div className="flex flex-col gap-12 px-8 pt-12 pb-24 text-body-inverse sm:px-16 md:flex-row dark:text-body">
+          <div className="text-body-inverse dark:text-body flex flex-col gap-12 px-8 pb-24 pt-12 sm:px-16 md:flex-row">
             <div className="flex flex-1 flex-col gap-8">
               <p>
                 <Translation
@@ -271,10 +271,10 @@ const Page = async (props: { params: Promise<PageParams> }) => {
         <div className="flex w-full flex-col items-center gap-8 px-8 py-8 lg:flex-row">
           <div className="flex flex-1 flex-col gap-6">
             <h2 className="flex flex-col gap-2 font-black">
-              <span className="text-4xl text-accent-a">
+              <span className="text-accent-a text-4xl">
                 {t("page-10-year-innovation-title")}
               </span>
-              <span className="text-5xl text-body md:text-7xl">
+              <span className="text-body text-5xl md:text-7xl">
                 {t("page-10-year-innovation-subtitle")}
               </span>
             </h2>
@@ -292,10 +292,10 @@ const Page = async (props: { params: Promise<PageParams> }) => {
           <div className="relative flex max-w-[350px] flex-1 flex-col gap-6">
             <div className="flex flex-col gap-6 lg:sticky lg:top-64 lg:mb-24">
               <h2 className="flex flex-col gap-2 font-black">
-                <span className="text-4xl text-accent-a">
+                <span className="text-accent-a text-4xl">
                   {t("page-10-year-adoption-title")}
                 </span>
-                <span className="text-5xl text-body md:text-7xl">
+                <span className="text-body text-5xl md:text-7xl">
                   {t("page-10-year-adoption-subtitle")}
                 </span>
               </h2>
@@ -348,10 +348,10 @@ const Page = async (props: { params: Promise<PageParams> }) => {
           <div className="flex max-w-[350px] flex-1 flex-col gap-6">
             <div className="flex flex-col gap-6 lg:sticky lg:top-64 lg:mb-24">
               <h2 className="flex flex-col gap-2 font-black">
-                <span className="text-4xl text-accent-a">
+                <span className="text-accent-a text-4xl">
                   {t("page-10-year-stories-title")}
                 </span>
-                <span className="text-5xl text-body md:text-7xl">
+                <span className="text-body text-5xl md:text-7xl">
                   {t("page-10-year-stories-subtitle")}
                 </span>
               </h2>

From 8d58c8ed2253eb423e4f92ff37fe625f09c48c85 Mon Sep 17 00:00:00 2001
From: Nuno Loureiro <loureironuno@gmail.com>
Date: Mon, 25 May 2026 12:08:29 +0100
Subject: [PATCH 2/5] fix(10years): fully override TabsList default shadow and
 border
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

shadow-none alone wasn't enough — the base component also has
md:shadow-lg (overrides shadow-none at desktop), md:border (visible
box border), and !p-0.5 (!important padding). Add md:shadow-none,
md:border-0, and !p-0 to suppress all three.
---
 app/[locale]/10years/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[locale]/10years/page.tsx b/app/[locale]/10years/page.tsx
index b1ec7a08647..a0335cc9453 100644
--- a/app/[locale]/10years/page.tsx
+++ b/app/[locale]/10years/page.tsx
@@ -117,7 +117,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
               defaultValue={Object.keys(tenYearEventRegions)[0]}
               className="w-full"
             >
-              <TabsList className="border-b-primary w-full flex-nowrap justify-start overflow-x-auto overflow-y-hidden rounded-none border-b-2 p-0 shadow-none">
+              <TabsList className="border-b-primary w-full flex-nowrap justify-start overflow-x-auto overflow-y-hidden rounded-none border-b-2 !p-0 shadow-none md:border-0 md:shadow-none">
                 {Object.entries(tenYearEventRegions).map(([key, data]) => (
                   <TabsTrigger
                     key={key}

From b7df5b95ff3d7a0e6344ebcf010e7c1ad3d9db62 Mon Sep 17 00:00:00 2001
From: Nuno Loureiro <loureironuno@gmail.com>
Date: Mon, 25 May 2026 12:27:42 +0100
Subject: [PATCH 3/5] fix(10years): restore default TabsList style, keep only
 layout overrides

The original className was overriding rounded-none + border-b + no-shadow
which broke the default card look while leaving the shadow active, causing
the "weird shadow" on a flat-edged box. Revert to default styles and only
override what's needed: full width, no wrap, and horizontal scroll.
---
 app/[locale]/10years/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[locale]/10years/page.tsx b/app/[locale]/10years/page.tsx
index a0335cc9453..0364fc753a7 100644
--- a/app/[locale]/10years/page.tsx
+++ b/app/[locale]/10years/page.tsx
@@ -117,7 +117,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
               defaultValue={Object.keys(tenYearEventRegions)[0]}
               className="w-full"
             >
-              <TabsList className="border-b-primary w-full flex-nowrap justify-start overflow-x-auto overflow-y-hidden rounded-none border-b-2 !p-0 shadow-none md:border-0 md:shadow-none">
+              <TabsList className="w-full max-w-full flex-nowrap justify-start overflow-x-auto overflow-y-hidden">
                 {Object.entries(tenYearEventRegions).map(([key, data]) => (
                   <TabsTrigger
                     key={key}

From 214187d3d0ff23f12ef8cb401f35052e8e181205 Mon Sep 17 00:00:00 2001
From: Nuno Loureiro <loureironuno@gmail.com>
Date: Mon, 25 May 2026 13:46:04 +0100
Subject: [PATCH 4/5] fix(10years): let TabsList use default max-w-fit width

Removing w-full/max-w-full so the tab list is only as wide
as its content, matching the default TabsList behaviour.
---
 app/[locale]/10years/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[locale]/10years/page.tsx b/app/[locale]/10years/page.tsx
index 0364fc753a7..082981ccbf2 100644
--- a/app/[locale]/10years/page.tsx
+++ b/app/[locale]/10years/page.tsx
@@ -117,7 +117,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
               defaultValue={Object.keys(tenYearEventRegions)[0]}
               className="w-full"
             >
-              <TabsList className="w-full max-w-full flex-nowrap justify-start overflow-x-auto overflow-y-hidden">
+              <TabsList className="flex-nowrap overflow-x-auto overflow-y-hidden">
                 {Object.entries(tenYearEventRegions).map(([key, data]) => (
                   <TabsTrigger
                     key={key}

From 5d85ccf9149412daa65cc0ea360075fe58eea4ac Mon Sep 17 00:00:00 2001
From: wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 26 May 2026 18:42:58 +0200
Subject: [PATCH 5/5] chore: run prettier

---
 app/[locale]/10years/page.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/[locale]/10years/page.tsx b/app/[locale]/10years/page.tsx
index 082981ccbf2..b89ead6959e 100644
--- a/app/[locale]/10years/page.tsx
+++ b/app/[locale]/10years/page.tsx
@@ -96,7 +96,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
         </div>
 
         <div className="w-full px-4 py-8 md:px-8">
-          <div className="rounded-4xl bg-radial-a flex flex-col items-center gap-4 px-4 pt-8 lg:px-14 lg:pt-14">
+          <div className="flex flex-col items-center gap-4 rounded-4xl bg-radial-a px-4 pt-8 lg:px-14 lg:pt-14">
             <div className="flex flex-col gap-4 text-center">
               <h2 className="text-4xl font-black">
                 {t("page-10-year-livestream-title")}
@@ -122,7 +122,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
                   <TabsTrigger
                     key={key}
                     value={key}
-                    className="text-primary whitespace-nowrap border-0"
+                    className="border-0 whitespace-nowrap text-primary"
                   >
                     {data.label}&nbsp;
                     <span className="text-sm">({data.events.length})</span>
@@ -157,8 +157,8 @@ const Page = async (props: { params: Promise<PageParams> }) => {
                             key={country}
                             className={cn("flex flex-col border-b px-4 py-6")}
                           >
-                            <h3 className="text-body-medium mb-2 flex items-center gap-2 text-2xl font-bold">
-                              <span className="bg-primary-low-contrast flex min-h-6 min-w-6 items-center justify-center overflow-hidden rounded-full">
+                            <h3 className="mb-2 flex items-center gap-2 text-2xl font-bold text-body-medium">
+                              <span className="flex min-h-6 min-w-6 items-center justify-center overflow-hidden rounded-full bg-primary-low-contrast">
                                 <Emoji
                                   text={countryEvents[0].countryFlag}
                                   className="scale-[1.75]"
@@ -170,7 +170,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
                               {countryEvents.map((event, index) => (
                                 <LinkBox
                                   key={index}
-                                  className="hover:bg-background-highlight flex flex-col justify-between gap-2 rounded-lg p-2 md:flex-row"
+                                  className="flex flex-col justify-between gap-2 rounded-lg p-2 hover:bg-background-highlight md:flex-row"
                                 >
                                   <div className="flex flex-col gap-2 md:flex-row md:items-center">
                                     <div>
@@ -206,7 +206,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
 
         <div
           id="torch-history"
-          className="bg-linear-to-b my-32 flex w-full scroll-mt-32 flex-col from-[#161A36] via-[#161A36] via-60% to-[#9C63F8] md:rounded-3xl"
+          className="my-32 flex w-full scroll-mt-32 flex-col bg-linear-to-b from-[#161A36] via-[#161A36] via-60% to-[#9C63F8] md:rounded-3xl"
         >
           <div className="p-8">
             <div className="relative">
@@ -224,13 +224,13 @@ const Page = async (props: { params: Promise<PageParams> }) => {
                     disablePictureInPicture
                     playsInline
                   />
-                  <div className="pointer-events-none absolute top-0 h-full w-full select-none bg-[url('/images/10-year-anniversary/torch-overlay.png')] bg-contain bg-center bg-no-repeat" />
+                  <div className="pointer-events-none absolute top-0 h-full w-full bg-[url('/images/10-year-anniversary/torch-overlay.png')] bg-contain bg-center bg-no-repeat select-none" />
                 </div>
               </div>
               {/* Curved text */}
               <Curved10YearsText
                 viewBox="0 0 356 186"
-                className="absolute left-1/2 top-0 h-min w-full max-w-[600px] -translate-x-1/2"
+                className="absolute top-0 left-1/2 h-min w-full max-w-[600px] -translate-x-1/2"
                 width="100%"
                 height="auto"
               />
@@ -239,7 +239,7 @@ const Page = async (props: { params: Promise<PageParams> }) => {
 
           <TorchHistorySwiper holders={torchHolders} />
 
-          <div className="text-body-inverse dark:text-body flex flex-col gap-12 px-8 pb-24 pt-12 sm:px-16 md:flex-row">
+          <div className="flex flex-col gap-12 px-8 pt-12 pb-24 text-body-inverse sm:px-16 md:flex-row dark:text-body">
             <div className="flex flex-1 flex-col gap-8">
               <p>
                 <Translation
@@ -271,10 +271,10 @@ const Page = async (props: { params: Promise<PageParams> }) => {
         <div className="flex w-full flex-col items-center gap-8 px-8 py-8 lg:flex-row">
           <div className="flex flex-1 flex-col gap-6">
             <h2 className="flex flex-col gap-2 font-black">
-              <span className="text-accent-a text-4xl">
+              <span className="text-4xl text-accent-a">
                 {t("page-10-year-innovation-title")}
               </span>
-              <span className="text-body text-5xl md:text-7xl">
+              <span className="text-5xl text-body md:text-7xl">
                 {t("page-10-year-innovation-subtitle")}
               </span>
             </h2>
@@ -292,10 +292,10 @@ const Page = async (props: { params: Promise<PageParams> }) => {
           <div className="relative flex max-w-[350px] flex-1 flex-col gap-6">
             <div className="flex flex-col gap-6 lg:sticky lg:top-64 lg:mb-24">
               <h2 className="flex flex-col gap-2 font-black">
-                <span className="text-accent-a text-4xl">
+                <span className="text-4xl text-accent-a">
                   {t("page-10-year-adoption-title")}
                 </span>
-                <span className="text-body text-5xl md:text-7xl">
+                <span className="text-5xl text-body md:text-7xl">
                   {t("page-10-year-adoption-subtitle")}
                 </span>
               </h2>
@@ -348,10 +348,10 @@ const Page = async (props: { params: Promise<PageParams> }) => {
           <div className="flex max-w-[350px] flex-1 flex-col gap-6">
             <div className="flex flex-col gap-6 lg:sticky lg:top-64 lg:mb-24">
               <h2 className="flex flex-col gap-2 font-black">
-                <span className="text-accent-a text-4xl">
+                <span className="text-4xl text-accent-a">
                   {t("page-10-year-stories-title")}
                 </span>
-                <span className="text-body text-5xl md:text-7xl">
+                <span className="text-5xl text-body md:text-7xl">
                   {t("page-10-year-stories-subtitle")}
                 </span>
               </h2>