From c8869b308858feda8cd067cb33c13f496857288e Mon Sep 17 00:00:00 2001
From: Catalin Pit <25515812+catalinpit@users.noreply.github.com>
Date: Wed, 28 Feb 2024 09:18:05 +0200
Subject: [PATCH] chore: fixed UI for webhooks team

---
 .../src/app/(dashboard)/settings/webhooks/page.tsx    |  5 ++++-
 .../(teams)/t/[teamUrl]/settings/webhooks/page.tsx    | 11 ++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/settings/webhooks/page.tsx b/apps/web/src/app/(dashboard)/settings/webhooks/page.tsx
index dcb90712b..01196544d 100644
--- a/apps/web/src/app/(dashboard)/settings/webhooks/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/webhooks/page.tsx
@@ -58,7 +58,10 @@ export default function WebhookPage() {
                   <div className="truncate font-mono text-xs">{webhook.id}</div>
 
                   <div className="mt-1.5 flex items-center gap-4">
-                    <h5 className="max-w-[30rem] truncate text-sm sm:max-w-[18rem]">
+                    <h5
+                      className="max-w-[30rem] truncate text-sm sm:max-w-[18rem]"
+                      title={webhook.webhookUrl}
+                    >
                       {webhook.webhookUrl}
                     </h5>
 
diff --git a/apps/web/src/app/(teams)/t/[teamUrl]/settings/webhooks/page.tsx b/apps/web/src/app/(teams)/t/[teamUrl]/settings/webhooks/page.tsx
index 4e41b4de6..054664624 100644
--- a/apps/web/src/app/(teams)/t/[teamUrl]/settings/webhooks/page.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/settings/webhooks/page.tsx
@@ -58,12 +58,17 @@ export default function WebhookPage() {
                 !webhook.enabled && 'bg-muted/40',
               )}
             >
-              <div className="flex items-center justify-between gap-x-4">
+              <div className="flex flex-col gap-x-4 sm:flex-row sm:items-center sm:justify-between">
                 <div>
                   <div className="truncate font-mono text-xs">{webhook.id}</div>
 
                   <div className="mt-1.5 flex items-center gap-2">
-                    <h5 className="text-sm">{webhook.webhookUrl}</h5>
+                    <h5
+                      className="max-w-[30rem] truncate text-sm sm:max-w-[18rem]"
+                      title={webhook.webhookUrl}
+                    >
+                      {webhook.webhookUrl}
+                    </h5>
 
                     <Badge variant={webhook.enabled ? 'neutral' : 'warning'} size="small">
                       {webhook.enabled ? 'Enabled' : 'Disabled'}
@@ -83,7 +88,7 @@ export default function WebhookPage() {
                   </p>
                 </div>
 
-                <div className="flex flex-shrink-0 gap-4">
+                <div className="mt-4 flex flex-shrink-0 gap-4 sm:mt-0">
                   <Button asChild variant="outline">
                     <Link href={`/t/${team.url}/settings/webhooks/${webhook.id}`}>Edit</Link>
                   </Button>