diff --git a/packages/ui/src/views/layouts/PullRequestLayout.tsx b/packages/ui/src/views/layouts/PullRequestLayout.tsx
index e5545e8c0..d58ab5ca2 100644
--- a/packages/ui/src/views/layouts/PullRequestLayout.tsx
+++ b/packages/ui/src/views/layouts/PullRequestLayout.tsx
@@ -33,7 +33,7 @@ const PullRequestLayout: React.FC<PullRequestLayoutProps> = ({
 
   return (
     <SandboxLayout.Main fullWidth>
-      <SandboxLayout.Content className="px-6" maxWidth="4xl">
+      <SandboxLayout.Content className="px-6 max-w-[1500px]">
         {pullRequest && (
           <>
             <PullRequestHeader
diff --git a/packages/ui/src/views/repo/pull-request/components/pull-request-header.tsx b/packages/ui/src/views/repo/pull-request/components/pull-request-header.tsx
index cca318c20..51ef0a5f9 100644
--- a/packages/ui/src/views/repo/pull-request/components/pull-request-header.tsx
+++ b/packages/ui/src/views/repo/pull-request/components/pull-request-header.tsx
@@ -64,15 +64,15 @@ export const PullRequestHeader: React.FC<PullRequestTitleProps> = ({
     }
   }, [description, val, updateTitle])
   return (
-    <div className="flex flex-col gap-y-4">
-      <div className="flex items-center">
-        <h1 className="flex items-center gap-x-2.5 text-24 font-medium text-foreground-1">
-          {!edit && original}
+    <div className="flex flex-col gap-y-4 w-full">
+      <div className="flex items-center w-full">
+        <div className="flex items-center gap-x-2.5 w-full max-w-full h-[44px] text-24 font-medium text-foreground-1">
+          {!edit && <div className="flex items-center h-full truncate max-w-[95%]">{original}</div>}
           {!edit && <span className="font-normal text-foreground-4">#{number}</span>}
           {edit ? (
-            <Layout.Horizontal>
+            <Layout.Horizontal className="w-full">
               <input
-                className="rounded-md border  bg-primary-background hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="rounded-md border w-fit max-w-full bg-primary-background hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 // wrapperClassName={css.input}
                 value={val}
                 onFocus={event => event.target.select()}
@@ -121,7 +121,7 @@ export const PullRequestHeader: React.FC<PullRequestTitleProps> = ({
             </Button>
           )}
           {err && <Text className="text-destructive">{err}</Text>}
-        </h1>
+        </div>
       </div>
 
       <div className="flex items-center gap-x-3">
diff --git a/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx b/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx
index df291cbf7..6049751d4 100644
--- a/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx
+++ b/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 
 import { Badge, MoreActionsTooltip, NoData, PaginationComponent, Spacer, StackedList, Text } from '@/components'
 import { TranslationStore, WebhookType } from '@/views'
@@ -97,38 +97,40 @@ export function RepoWebhookList({
     <>
       <StackedList.Root>
         {webhooks.map((webhook, webhook_idx) => (
-          <StackedList.Item
-            key={webhook.createdAt}
-            className="!cursor-default py-3 pr-1.5"
-            isLast={webhooks.length - 1 === webhook_idx}
-          >
-            <StackedList.Field
-              primary
-              description={<span className="leading-none">{webhook.description}</span>}
-              title={<Title title={webhook.name} isEnabled={webhook.enabled} />}
-              className="gap-1.5"
-            />
-            <StackedList.Field
-              title={
-                <MoreActionsTooltip
-                  actions={[
-                    {
-                      title: t('views:webhookData.edit', 'Edit webhook'),
-                      to: `${webhook.id}`
-                    },
-                    {
-                      isDanger: true,
-                      title: t('views:webhookData.delete', 'Delete webhook'),
-                      onClick: () => openDeleteWebhookDialog(webhook.id)
-                    }
-                  ]}
-                />
-              }
-              right
-              label
-              secondary
-            />
-          </StackedList.Item>
+          <Link key={webhook.id} to={`${webhook.id}`} className="cursor-pointer">
+            <StackedList.Item
+              key={webhook.createdAt}
+              className="!cursor-default py-3 pr-1.5"
+              isLast={webhooks.length - 1 === webhook_idx}
+            >
+              <StackedList.Field
+                primary
+                description={<span className="leading-none">{webhook.description}</span>}
+                title={<Title title={webhook.name} isEnabled={webhook.enabled} />}
+                className="gap-1.5"
+              />
+              <StackedList.Field
+                title={
+                  <MoreActionsTooltip
+                    actions={[
+                      {
+                        title: t('views:webhookData.edit', 'Edit webhook'),
+                        to: `${webhook.id}`
+                      },
+                      {
+                        isDanger: true,
+                        title: t('views:webhookData.delete', 'Delete webhook'),
+                        onClick: () => openDeleteWebhookDialog(webhook.id)
+                      }
+                    ]}
+                  />
+                }
+                right
+                label
+                secondary
+              />
+            </StackedList.Item>
+          </Link>
         ))}
       </StackedList.Root>
       <PaginationComponent totalPages={totalPages} currentPage={page} goToPage={setPage} t={t} />