Truncate long country lists with a popover

AWS-scale region lists blew out subprocessor cards. Cap the
visible labels and open the rest from a +N trigger using a
new Base UI Popover in the v2 kit.

Signed-off-by: Émile Ré <emile@probo.com>

apps/compliance-portal/src/pages/subprocessors/_components/SubprocessorListItem.tsx

@@ -20,7 +20,11 @@
 
 import { BuildingsIcon, MapPinSimpleIcon } from "@phosphor-icons/react";
 import { faviconUrl } from "@probo/helpers";
+import { Popover } from "@probo/ui/src/v2/Popover/Popover";
+import { PopoverPopup } from "@probo/ui/src/v2/Popover/PopoverPopup";
+import { PopoverTrigger } from "@probo/ui/src/v2/Popover/PopoverTrigger";
 import { Text } from "@probo/ui/src/v2/typography/Text";
+import { useTranslation } from "react-i18next";
 import { graphql, useFragment } from "react-relay";
 
 import { BackdropCard } from "#/components/BackdropCard/BackdropCard";
@@ -30,6 +34,8 @@ import { useCountryLabel } from "../_lib/useCountryLabel";
 import type { SubprocessorListItem_subprocessor$key } from "./__generated__/SubprocessorListItem_subprocessor.graphql";
 import { subprocessorListItem } from "./variants";
 
+const VISIBLE_COUNTRY_COUNT = 5;
+
 const subprocessorListItemFragment = graphql`
   fragment SubprocessorListItem_subprocessor on Subprocessor @throwOnFieldError {
     name
@@ -47,9 +53,11 @@ interface SubprocessorListItemProps {
 // description, and the hosting regions.
 export function SubprocessorListItem({ subprocessorKey }: SubprocessorListItemProps) {
   const subprocessor = useFragment(subprocessorListItemFragment, subprocessorKey);
+  const { t } = useTranslation("subprocessors");
   const countryLabel = useCountryLabel();
   const logoUrl = faviconUrl(subprocessor.websiteUrl);
-  const countries = subprocessor.countries.map(countryLabel).join(", ");
+  const visibleCodes = subprocessor.countries.slice(0, VISIBLE_COUNTRY_COUNT);
+  const hiddenCodes = subprocessor.countries.slice(VISIBLE_COUNTRY_COUNT);
   const slots = subprocessorListItem();
 
   return (
@@ -71,11 +79,34 @@ export function SubprocessorListItem({ subprocessorKey }: SubprocessorListItemPr
           {subprocessor.description}
         </Text>
       )}
-      {countries !== "" && (
+      {subprocessor.countries.length > 0 && (
         <div className={slots.region()}>
           <MapPinSimpleIcon className={slots.regionIcon()} />
           <Text size={1} color="gold">
-            {countries}
+            {visibleCodes.map(countryLabel).join(", ")}
+            {hiddenCodes.length > 0 && (
+              <>
+                {" "}
+                <Popover>
+                  <PopoverTrigger
+                    className={slots.moreTrigger()}
+                    aria-label={t("regions.moreRegions", { count: hiddenCodes.length })}
+                  >
+                    +
+                    {hiddenCodes.length}
+                  </PopoverTrigger>
+                  <PopoverPopup>
+                    <div className={slots.moreList()}>
+                      {hiddenCodes.map(code => (
+                        <Text key={code} size={1} color="neutral" highContrast>
+                          {countryLabel(code)}
+                        </Text>
+                      ))}
+                    </div>
+                  </PopoverPopup>
+                </Popover>
+              </>
+            )}
           </Text>
         </div>
       )}

apps/compliance-portal/src/pages/subprocessors/_components/variants.ts

@@ -30,5 +30,12 @@ export const subprocessorListItem = tv({
     logoFallbackIcon: "text-sand-9",
     region: "flex items-start gap-1",
     regionIcon: "size-4 shrink-0 text-gold-11",
+    // Button reset so the +N control keeps the Text line box (and pin alignment).
+    moreTrigger: [
+      "inline border-0 bg-transparent p-0 font-medium align-baseline",
+      "cursor-pointer underline-offset-2 hover:underline",
+      "outline-none focus-visible:underline",
+    ],
+    moreList: "flex flex-wrap gap-x-2 gap-y-1",
   },
 });

apps/compliance-portal/src/pages/subprocessors/_locales/de-DE.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "Weltweit",
-    "eu": "Europäische Union"
+    "eu": "Europäische Union",
+    "moreRegions": "{{count}} weitere Regionen anzeigen"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/en-US.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "Global",
-    "eu": "European Union"
+    "eu": "European Union",
+    "moreRegions": "Show {{count}} more regions"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/es-ES.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "Internacional",
-    "eu": "Unión Europea"
+    "eu": "Unión Europea",
+    "moreRegions": "Mostrar {{count}} regiones más"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/fr-FR.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "International",
-    "eu": "Union européenne"
+    "eu": "Union européenne",
+    "moreRegions": "Afficher {{count}} régions supplémentaires"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/id-ID.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "Global",
-    "eu": "Uni Eropa"
+    "eu": "Uni Eropa",
+    "moreRegions": "Tampilkan {{count}} wilayah lainnya"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/it-IT.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "Globale",
-    "eu": "Unione Europea"
+    "eu": "Unione Europea",
+    "moreRegions": "Mostra altre {{count}} regioni"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/ja-JP.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "グローバル",
-    "eu": "欧州連合"
+    "eu": "欧州連合",
+    "moreRegions": "他{{count}}件の地域を表示"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/ko-KR.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "글로벌",
-    "eu": "유럽연합"
+    "eu": "유럽연합",
+    "moreRegions": "지역 {{count}}개 더 보기"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/pl-PL.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "Globalny",
-    "eu": "Unia Europejska"
+    "eu": "Unia Europejska",
+    "moreRegions": "Pokaż {{count}} więcej regionów"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/pt-PT.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "Global",
-    "eu": "União Europeia"
+    "eu": "União Europeia",
+    "moreRegions": "Mostrar mais {{count}} regiões"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/tr-TR.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "Küresel",
-    "eu": "Avrupa Birliği"
+    "eu": "Avrupa Birliği",
+    "moreRegions": "{{count}} bölge daha göster"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/uk-UA.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "Глобально",
-    "eu": "Європейський Союз"
+    "eu": "Європейський Союз",
+    "moreRegions": "Показати ще {{count}} регіонів"
   },
   "categories": {
     "ANALYTICS": {

apps/compliance-portal/src/pages/subprocessors/_locales/zh-CN.json

@@ -14,7 +14,8 @@
   },
   "regions": {
     "global": "全球",
-    "eu": "欧盟"
+    "eu": "欧盟",
+    "moreRegions": "显示另外 {{count}} 个地区"
   },
   "categories": {
     "ANALYTICS": {

packages/ui/src/v2/Popover/Popover.stories.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { Button } from "../Button/Button";
+import { Text } from "../typography/Text";
+
+import { Popover } from "./Popover";
+import { PopoverPopup } from "./PopoverPopup";
+import { PopoverTrigger } from "./PopoverTrigger";
+
+export default {
+  title: "v2/Popover",
+  component: Popover,
+};
+
+export function Default() {
+  return (
+    <Popover>
+      <PopoverTrigger render={<Button variant="soft" color="neutral">Open popover</Button>} />
+      <PopoverPopup>
+        <Text size={2} color="neutral" highContrast>
+          Popover content goes here.
+        </Text>
+      </PopoverPopup>
+    </Popover>
+  );
+}

packages/ui/src/v2/Popover/Popover.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type { ComponentProps } from "react";
+
+// Root of the popover (Radix "Popover"). Controlled the same way as Base UI's
+// Popover: `open` / `onOpenChange`, or left uncontrolled. See contrib/claude/ui.md.
+export type PopoverProps = ComponentProps<typeof BasePopover.Root>;
+
+export function Popover(props: PopoverProps) {
+  return <BasePopover.Root {...props} />;
+}

packages/ui/src/v2/Popover/PopoverPopup.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type { ComponentProps } from "react";
+
+import { popoverPopup } from "./variants";
+
+export type PopoverPopupProps
+  = & Omit<ComponentProps<typeof BasePopover.Popup>, "className">
+    & {
+      className?: string;
+      // Positioner placement passthrough.
+      side?: ComponentProps<typeof BasePopover.Positioner>["side"];
+      align?: ComponentProps<typeof BasePopover.Positioner>["align"];
+      sideOffset?: ComponentProps<typeof BasePopover.Positioner>["sideOffset"];
+    };
+
+// Portal + positioner + styled popup. Content-agnostic — callers compose children.
+export function PopoverPopup(props: PopoverPopupProps) {
+  const {
+    className, children,
+    side = "bottom", align = "start", sideOffset = 4,
+    ...popupProps
+  } = props;
+
+  return (
+    <BasePopover.Portal>
+      {/* z-3 on the Positioner so the portaled root wins over in-page z-1. */}
+      <BasePopover.Positioner className="z-3" side={side} align={align} sideOffset={sideOffset}>
+        <BasePopover.Popup className={popoverPopup({ className })} {...popupProps}>
+          {children}
+        </BasePopover.Popup>
+      </BasePopover.Positioner>
+    </BasePopover.Portal>
+  );
+}

packages/ui/src/v2/Popover/PopoverTrigger.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type { ComponentProps } from "react";
+
+// The element that opens the popover. Compose a Button via `render` to style it,
+// or pass className/children for a native button trigger.
+export type PopoverTriggerProps = ComponentProps<typeof BasePopover.Trigger>;
+
+export function PopoverTrigger(props: PopoverTriggerProps) {
+  return <BasePopover.Trigger {...props} />;
+}

packages/ui/src/v2/Popover/variants.ts

@@ -0,0 +1,32 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { tv } from "tailwind-variants/lite";
+
+// Floating popover surface (Radix "Popover" over Base UI). Same panel look as
+// DropdownPopup; content-agnostic so callers compose arbitrary children.
+
+export const popoverPopup = tv({
+  base: [
+    "max-w-sm origin-(--transform-origin) rounded-3 bg-sand-1 p-3 shadow-5 outline-none",
+    "transition-[scale,opacity] duration-150 ease-out data-starting-style:scale-95 data-starting-style:opacity-0",
+    "data-ending-style:scale-95 data-ending-style:opacity-0",
+  ],
+});