fix: secret id overlap with secret key for large secret ids numbers

frontend/app/[team]/apps/[app]/_components/AppSecretRow.tsx

@@ -394,7 +394,8 @@ export const AppSecretRow = ({
             <td
               className={clsx(
                 `px-2 py-0.5 whitespace-nowrap font-mono ${rowInputColor()} flex items-center gap-2 ph-no-capture`,
-                isExpanded ? 'font-bold' : 'font-medium'
+                isExpanded ? 'font-bold' : 'font-medium',
+                index > 999 && 'px-4'
               )}
             >
               <button
@@ -412,7 +413,8 @@ export const AppSecretRow = ({
                 <span
                   className={clsx(
                     'text-neutral-500 font-mono absolute transition ease',
-                    isExpanded ? 'opacity-0' : 'opacity-100 group-hover:opacity-0'
+                    isExpanded ? 'opacity-0' : 'opacity-100 group-hover:opacity-0',
+                    index > 999 ? 'w-10' : 'w-5'
                   )}
                 >
                   {index + 1}

frontend/app/[team]/apps/[app]/_components/AppSecrets.tsx

@@ -845,7 +845,7 @@ export const AppSecrets = ({ team, app }: { team: string; app: string }) => {
                   className="sticky top-0 z-10 dark:bg-zinc-900/50 backdrop-blur-sm"
                 >
                   <tr>
-                    <th className="pl-10 text-left text-2xs 2xl:text-sm font-medium text-gray-500 uppercase tracking-wide">
+                    <th className={clsx("pl-10 text-left text-2xs 2xl:text-sm font-medium text-gray-500 uppercase tracking-wide", filteredSecrets.length > 999 && "pl-14")}>
                       key
                     </th>
                     {appEnvironments?.map((env: EnvironmentType) => (

frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]/page.tsx

@@ -971,7 +971,7 @@ export default function EnvironmentPath({
 
             {(clientSecrets.length > 0 || folders.length > 0) && (
               <div className="flex items-center w-full">
-                <div className="px-9 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider w-1/3">
+                <div className={clsx("px-12 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider w-1/3 ", filteredAndSortedSecrets.length > 999 && "px-18")}>
                   key
                 </div>
                 <div className="px-4 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider w-2/3 flex items-center justify-between">
@@ -1022,7 +1022,11 @@ export default function EnvironmentPath({
                   )}
                   key={secret.id}
                 >
-                  <span className="text-neutral-500 font-mono w-5">{index + 1}</span>
+                  <span
+                    className={clsx('text-neutral-500 font-mono', index > 999 ? 'w-10' : 'w-5')}
+                  >
+                    {index + 1}
+                  </span>
                   <SecretRow
                     orgId={organisation.id}
                     secret={secret as SecretType}