From 127ee5508a718ee840f93877ed06ccce60adbca0 Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Sun, 26 Apr 2026 01:56:05 -0400
Subject: [PATCH] fix(client): truncate long notification destinations with a
 middle ellipsis

The destination column wrapped onto two lines for long webhook URLs. Cap the cell at 320px and use rtl + plaintext bidi so the start and end of the URL stay visible with an ellipsis in between; full address is in the title attribute.
---
 .../components/NotificationsTable.tsx         | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/client/src/Pages/Notifications/components/NotificationsTable.tsx b/client/src/Pages/Notifications/components/NotificationsTable.tsx
index a1c8d8921..a7a8170f6 100644
--- a/client/src/Pages/Notifications/components/NotificationsTable.tsx
+++ b/client/src/Pages/Notifications/components/NotificationsTable.tsx
@@ -1,4 +1,5 @@
 import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
+import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import type { Header } from "@/Components/design-elements/Table";
 import { Table } from "@/Components/design-elements";
@@ -71,7 +72,23 @@ export const NotificationsTable = ({
 				id: "destination",
 				content: t("pages.notifications.table.headers.destination"),
 				render: (row) => {
-					return <Typography>{row?.address}</Typography>;
+					return (
+						<Box sx={{ maxWidth: 320, mx: "auto" }}>
+							<Typography
+								title={row?.address}
+								sx={{
+									direction: "rtl",
+									textAlign: "left",
+									unicodeBidi: "plaintext",
+									whiteSpace: "nowrap",
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+								}}
+							>
+								{row?.address}
+							</Typography>
+						</Box>
+					);
 				},
 			},
 			{