From 3c06705a13fc1992647225cf4c6e7364288bbcfd Mon Sep 17 00:00:00 2001
From: Mohammed Yasin Mulla
 <55092280+Mohammed-Yasin-Mulla@users.noreply.github.com>
Date: Mon, 2 Jun 2025 22:18:20 +0530
Subject: [PATCH] style: add comma to the Applied to target roles (#36067)

---
 .../interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
index 473adfc4bed..5c0b93ebab7 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
@@ -78,10 +78,10 @@ const PolicyRow = ({
               <div className="text-foreground-lighter text-sm">
                 Applied to:{' '}
                 {policy.roles.slice(0, 3).map((role, i) => (
-                  <code key={`policy-${role}-${i}`} className="text-foreground-light text-xs">
-                    {role}
-                    {policy.roles.length > 1 ? '' : ' '}
-                  </code>
+                  <span key={`policy-${role}-${i}`}>
+                    <code className="text-foreground-light text-xs">{role}</code>
+                    {i < Math.min(policy.roles.length, 3) - 1 && ', '}
+                  </span>
                 ))}
                 {policy.roles.length > 1 ? 'roles' : 'role'}
               </div>