From 46ababfcf9505894295d6a652a760cd114f30d33 Mon Sep 17 00:00:00 2001
From: Kieran Hall <kieran@dusk.network>
Date: Wed, 2 Oct 2024 13:08:44 +0200
Subject: [PATCH] Add maxlength to Badge and break long list items

Resolves #2557
---
 explorer/src/lib/components/list-item/ListItem.css     |  1 +
 .../components/transaction-type/TransactionType.svelte |  4 +++-
 .../src/lib/dusk/components/__tests__/Badge.spec.js    | 10 ++++++++++
 explorer/src/lib/dusk/components/badge/Badge.svelte    |  5 ++++-
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/explorer/src/lib/components/list-item/ListItem.css b/explorer/src/lib/components/list-item/ListItem.css
index 8889ed9945..c0c89c2e57 100644
--- a/explorer/src/lib/components/list-item/ListItem.css
+++ b/explorer/src/lib/components/list-item/ListItem.css
@@ -39,6 +39,7 @@
   gap: 0.625rem;
   align-items: center;
   margin-bottom: 1.25rem;
+  line-break: anywhere;
 }
 
 .details-list__definition:last-of-type {
diff --git a/explorer/src/lib/components/transaction-type/TransactionType.svelte b/explorer/src/lib/components/transaction-type/TransactionType.svelte
index 116d0cec2a..f1fa5c1fea 100644
--- a/explorer/src/lib/components/transaction-type/TransactionType.svelte
+++ b/explorer/src/lib/components/transaction-type/TransactionType.svelte
@@ -7,6 +7,8 @@
 
   /** @type {boolean} */
   export let displayTooltips = false;
+
+  const BADGE_TEXT_MAX_LENGTH = 20;
 </script>
 
 <div class="transaction-type">
@@ -22,5 +24,5 @@
       : mdiShieldOutline}
     size="large"
   />
-  <Badge text={data.method} />
+  <Badge text={data.method} maxlength={BADGE_TEXT_MAX_LENGTH} />
 </div>
diff --git a/explorer/src/lib/dusk/components/__tests__/Badge.spec.js b/explorer/src/lib/dusk/components/__tests__/Badge.spec.js
index 7c2194254e..6d7f43e225 100644
--- a/explorer/src/lib/dusk/components/__tests__/Badge.spec.js
+++ b/explorer/src/lib/dusk/components/__tests__/Badge.spec.js
@@ -44,4 +44,14 @@ describe("Badge", () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it("should only display a string 10 characters long", () => {
+    const props = {
+      ...baseProps,
+      maxlength: 10,
+      text: "ABCDEFGHIJK",
+    };
+    const { container } = render(Badge, { ...props });
+    expect(container.firstChild?.textContent?.length).toBe(10);
+  });
 });
diff --git a/explorer/src/lib/dusk/components/badge/Badge.svelte b/explorer/src/lib/dusk/components/badge/Badge.svelte
index ebdfffa452..0dbfdd397b 100644
--- a/explorer/src/lib/dusk/components/badge/Badge.svelte
+++ b/explorer/src/lib/dusk/components/badge/Badge.svelte
@@ -10,6 +10,9 @@
   /** @type {String | Undefined} */
   export let className = undefined;
 
+  /** @type {number | Undefined} */
+  export let maxlength = undefined;
+
   $: classes = makeClassName([
     "dusk-badge",
     `dusk-badge--variant-${variant}`,
@@ -17,4 +20,4 @@
   ]);
 </script>
 
-<span {...$$restProps} class={classes}>{text}</span>
+<span {...$$restProps} class={classes}>{text.substring(0, maxlength)}</span>