From 1e51ffbde07b133287bdbd54404119ede0383487 Mon Sep 17 00:00:00 2001
From: R-Hart80 <R-Hart80@users.noreply.github.com>
Date: Mon, 13 Apr 2026 17:08:25 -0300
Subject: [PATCH] fix: dim labels and reposition note for webhook-driven
 readonly fields

When a project is webhook-driven, the four GitHub integration input
fields (repo owner, repo name, branch, file path) were already marked
readOnly and visually styled as disabled on the inputs themselves.
This commit extends the visual treatment to their labels by applying
opacity-60 when isWebhookDriven is true, and moves the explanatory
note ("Repository fields are managed by the GitHub integration.")
to appear after all four fields so it clearly covers the whole group.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/projects/[id]/settings/page.tsx | 32 ++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/app/projects/[id]/settings/page.tsx b/app/projects/[id]/settings/page.tsx
index e420d8d4..0c846e41 100644
--- a/app/projects/[id]/settings/page.tsx
+++ b/app/projects/[id]/settings/page.tsx
@@ -2883,7 +2883,10 @@ function RemoteSyncSection({
               {/* Repository */}
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                  <label className={cn(
+                    "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300",
+                    isWebhookDriven && "opacity-60"
+                  )}>
                     Repository owner
                   </label>
                   <input
@@ -2901,7 +2904,10 @@ function RemoteSyncSection({
                   />
                 </div>
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                  <label className={cn(
+                    "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300",
+                    isWebhookDriven && "opacity-60"
+                  )}>
                     Repository name
                   </label>
                   <input
@@ -2920,12 +2926,6 @@ function RemoteSyncSection({
                 </div>
               </div>
 
-              {isWebhookDriven && (
-                <p className="text-xs text-indigo-500 dark:text-indigo-400">
-                  Repository fields are managed by the GitHub integration.
-                </p>
-              )}
-
               {/* Same-repo info when editing form matches GitHub integration */}
               {!isWebhookDriven && githubIntegration &&
                 repoOwner === githubIntegration.repo_owner &&
@@ -2939,7 +2939,10 @@ function RemoteSyncSection({
               {/* Branch + File path */}
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                  <label className={cn(
+                    "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300",
+                    isWebhookDriven && "opacity-60"
+                  )}>
                     Branch
                   </label>
                   <input
@@ -2957,7 +2960,10 @@ function RemoteSyncSection({
                   />
                 </div>
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                  <label className={cn(
+                    "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300",
+                    isWebhookDriven && "opacity-60"
+                  )}>
                     File path
                   </label>
                   <input
@@ -2976,6 +2982,12 @@ function RemoteSyncSection({
                 </div>
               </div>
 
+              {isWebhookDriven && (
+                <p className="text-xs text-indigo-500 dark:text-indigo-400">
+                  Repository fields are managed by the GitHub integration.
+                </p>
+              )}
+
               {/* Frequency + Update mode */}
               <div className="grid grid-cols-2 gap-3">
                 <div>