Implement smart capitalization based on locale (#17860)

web/src/components/card/ExportCard.tsx

@@ -222,7 +222,7 @@ export default function ExportCard({
           <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
         )}
         <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[20%] rounded-lg bg-gradient-to-t from-black/60 to-transparent md:rounded-2xl">
-          <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm capitalize text-white">
+          <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white smart-capitalize">
             {exportedRecording.name.replaceAll("_", " ")}
           </div>
         </div>

web/src/components/card/ReviewCard.tsx

@@ -175,7 +175,7 @@ export default function ReviewCard({
               <div className="font-extra-light text-xs">{formattedDate}</div>
             </div>
           </TooltipTrigger>
-          <TooltipContent className="capitalize">
+          <TooltipContent className="smart-capitalize">
             {[
               ...new Set([
                 ...(event.data.objects || []),

web/src/components/card/SearchThumbnail.tsx

@@ -146,7 +146,7 @@ export default function SearchThumbnail({
               </TooltipTrigger>
             </div>
             <TooltipPortal>
-              <TooltipContent className="capitalize">
+              <TooltipContent className="smart-capitalize">
                 {[searchResult.sub_label ?? objectLabel]
                   .filter(
                     (item) => item !== undefined && !item.includes("-verified"),