fix: components in configuration now get truncated properly (#4371)

jbx-protocol · Jul 7, 2024 · bd61fa8 · bd61fa8
1 parent f8c520b
commit bd61fa8
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/...3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/ConfigurationTable.tsx b/...3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/ConfigurationTable.tsx
@@ -2,6 +2,7 @@ import { MinusCircleIcon, PlusCircleIcon } from '@heroicons/react/24/outline'
 import { t } from '@lingui/macro'
 import { Tooltip } from 'antd'
 import ExternalLink from 'components/ExternalLink'
+import { TruncatedText } from 'components/TruncatedText'
 import CopyTextButton from 'components/buttons/CopyTextButton'
 import { ReactNode, useMemo } from 'react'
 import { ConfigurationPanelTableData } from './ConfigurationPanel'
@@ -87,13 +88,17 @@ const ConfigurationTableRow = ({
   <div className="flex justify-between gap-10 border-b border-grey-200 py-3 dark:border-slate-500">
     <div className="flex justify-between gap-3 font-medium">{name}</div>
     {!loading ? (
-      <div className="flex gap-1">
+      <div className="flex min-w-0 gap-1">
         {link ? (
-          <ExternalLink onClick={e => e.stopPropagation()} href={link}>
-            {value}
-          </ExternalLink>
+          <TruncatedText
+            text={
+              <ExternalLink onClick={e => e.stopPropagation()} href={link}>
+                {value}
+              </ExternalLink>
+            }
+          />
         ) : (
-          <div className="truncate text-end">{value}</div>
+          <TruncatedText text={value} />
         )}
         {easyCopy && <CopyTextButton value={value as string} />}
       </div>