From ccd9e75dc3ee97b5001a972e53da3c01b0257a29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matou=C5=A1=20Dzivjak?= <matousdzivjak@gmail.com>
Date: Fri, 3 Apr 2026 14:51:58 +0200
Subject: [PATCH] chore: identifiers tables

Improve rendering of tables with identifiers. Remove expandability.
---
 src/components/content/SearchableTable.tsx   | 35 ++------------------
 src/content/docs/tools/glossary/merchant.mdx |  6 ++--
 2 files changed, 6 insertions(+), 35 deletions(-)

diff --git a/src/components/content/SearchableTable.tsx b/src/components/content/SearchableTable.tsx
index 55e01a7a..faa33806 100644
--- a/src/components/content/SearchableTable.tsx
+++ b/src/components/content/SearchableTable.tsx
@@ -1,5 +1,5 @@
-import { Button, SearchInput } from "@sumup-oss/circuit-ui";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { SearchInput } from "@sumup-oss/circuit-ui";
+import { useMemo, useRef, useState } from "react";
 
 import styles from "./SearchableTable.module.css";
 import Table, { type TableColumn } from "./Table";
@@ -10,7 +10,6 @@ type Props = {
   columns: SearchableTableColumn[];
   rows: Record<string, unknown>[];
   searchPlaceholder?: string;
-  maxHeight?: number;
   tableLayout?: "fixed" | "auto";
 };
 
@@ -18,12 +17,9 @@ const SearchableTable = ({
   columns,
   rows,
   searchPlaceholder = "Search",
-  maxHeight = 420,
   tableLayout = "fixed",
 }: Props) => {
   const [searchQuery, setSearchQuery] = useState("");
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [canExpand, setCanExpand] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   const normalizedQuery = searchQuery.trim().toLowerCase();
@@ -47,19 +43,6 @@ const SearchableTable = ({
     );
   }, [columns, normalizedQuery, rows]);
 
-  useEffect(() => {
-    const container = wrapperRef.current;
-    if (!container) {
-      return;
-    }
-
-    setCanExpand(container.scrollHeight > maxHeight);
-  }, [filteredRows, maxHeight]);
-
-  useEffect(() => {
-    setIsExpanded(false);
-  }, [searchQuery]);
-
   return (
     <section className={`${styles.section} not-content`}>
       <SearchInput
@@ -75,20 +58,8 @@ const SearchableTable = ({
         rows={filteredRows}
         tableLayout={tableLayout}
         containerRef={wrapperRef}
-        maxHeight={isExpanded ? undefined : `${maxHeight}px`}
+        maxHeight="420px"
       />
-
-      {canExpand ? (
-        <Button
-          type="button"
-          variant="tertiary"
-          size="s"
-          onClick={() => setIsExpanded((value) => !value)}
-          className={styles.button}
-        >
-          {isExpanded ? "Collapse" : "Expand to view all"}
-        </Button>
-      ) : null}
     </section>
   );
 };
diff --git a/src/content/docs/tools/glossary/merchant.mdx b/src/content/docs/tools/glossary/merchant.mdx
index 683b303e..0af9f423 100644
--- a/src/content/docs/tools/glossary/merchant.mdx
+++ b/src/content/docs/tools/glossary/merchant.mdx
@@ -37,7 +37,7 @@ suffix identifies the specific type of identifier.
     { key: "icon", label: "" },
     { key: "country", label: "Country", nowrap: true },
     { key: "name", label: "Name", minWidth: "18rem" },
-    { key: "ref", label: "Reference", nowrap: true },
+    { key: "ref", label: "Reference", nowrap: true, as: "code" },
   ]}
   rows={[
     {
@@ -613,7 +613,7 @@ Legal types are of the pattern `{country_code}.{identifier_type}`. The prefix in
     { key: "icon", label: "" },
     { key: "country", label: "Country", nowrap: true },
     { key: "description", label: "Description", minWidth: "18rem" },
-    { key: "ref", label: "Reference", nowrap: true },
+    { key: "ref", label: "Reference", nowrap: true, as: "code" },
   ]}
   rows={[
     {
@@ -2901,7 +2901,7 @@ Persons can have various roles within a merchant:
     { key: "icon", label: "" },
     { key: "country", label: "Country", nowrap: true },
     { key: "name", label: "Name", minWidth: "18rem" },
-    { key: "ref", label: "Reference", nowrap: true },
+    { key: "ref", label: "Reference", nowrap: true, as: "code" },
   ]}
   rows={[
     {