chore: identifiers tables

Improve rendering of tables with identifiers. Remove expandability.

Author: matoous

src/components/content/SearchableTable.tsx

@@ -1,4 +1,4 @@
-import { Button, SearchInput } from "@sumup-oss/circuit-ui";
+import { SearchInput } from "@sumup-oss/circuit-ui";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import styles from "./SearchableTable.module.css";
@@ -10,20 +10,16 @@ type Props = {
   columns: SearchableTableColumn[];
   rows: Record<string, unknown>[];
   searchPlaceholder?: string;
-  maxHeight?: number;
   tableLayout?: "fixed" | "auto";
 };
 
 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>
   );
 };

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={[
     {