Apply Keith's review changes && fix long group names being truncted

Signed-off-by: Atif Ali <atali@redhat.com>

Author: aali309

src/gitops/components/project/ProjectRolesTab.tsx

@@ -52,7 +52,23 @@ const formatPolicyDescription = (policy: string, t: (key: string) => string): Re
       </div>
       <div>
         <strong>{t('Policy Effect')}:</strong>{' '}
-        {effect === 'allow' ? `✅ ${t('Allow')}` : `❌ ${t('Deny')}`}
+        {effect === 'allow' ? (
+          <>
+            <i
+              className="fas fa-check-circle"
+              style={{ color: 'var(--pf-v5-global--success-color--100)' }}
+            />{' '}
+            {t('Allow')}
+          </>
+        ) : (
+          <>
+            <i
+              className="fas fa-times-circle"
+              style={{ color: 'var(--pf-v5-global--danger-color--100)' }}
+            />{' '}
+            {t('Deny')}
+          </>
+        )}
       </div>
     </div>
   );

src/gitops/components/project/ResourceAllowDenyList.scss

@@ -0,0 +1,34 @@
+.resource-allow-deny-list {
+  width: 100%;
+  display: block;
+  overflow-x: auto;
+  overflow-y: visible;
+
+  table {
+    width: 100%;
+    table-layout: auto;
+    margin-bottom: 0;
+  }
+
+  // Target PatternFly table cells directly - ensure text wraps instead of truncating
+  tbody td.resource-allow-deny-list__kind,
+  thead th.resource-allow-deny-list__kind {
+    min-width: 80px;
+    max-width: 45%;
+    word-break: break-word !important;
+    white-space: normal !important;
+    overflow-wrap: break-word !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+  }
+
+  tbody td.resource-allow-deny-list__group,
+  thead th.resource-allow-deny-list__group {
+    min-width: 120px;
+    word-break: break-word !important;
+    white-space: normal !important;
+    overflow-wrap: break-word !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+  }
+}

src/gitops/components/project/ResourceAllowDenyList.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 
-import { EmptyState, EmptyStateBody, PageSection } from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
 import { ResourceAllowDeny } from '../../models/AppProjectModel';
 import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
 
+import './ResourceAllowDenyList.scss';
+
 interface ResourceAllowDenyListProps {
   list?: ResourceAllowDeny[];
 }
@@ -17,30 +19,36 @@ const ResourceAllowDenyList: React.FC<ResourceAllowDenyListProps> = ({ list }) =
   const resourceList = list || [];
 
   return (
-    <PageSection>
+    <>
       {resourceList.length > 0 ? (
-        <Table aria-label="Resource Allow/Deny table" borders>
-          <Thead>
-            <Tr>
-              <Th>{t('Kind')}</Th>
-              <Th>{t('Group')}</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {resourceList.map((resource, index) => (
-              <Tr key={index}>
-                <Td dataLabel={t('Kind')}>{resource.kind || '-'}</Td>
-                <Td dataLabel={t('Group')}>{resource.group || '-'}</Td>
+        <div className="resource-allow-deny-list">
+          <Table aria-label="Resource Allow/Deny table" borders>
+            <Thead>
+              <Tr>
+                <Th className="resource-allow-deny-list__kind">{t('Kind')}</Th>
+                <Th className="resource-allow-deny-list__group">{t('Group')}</Th>
               </Tr>
-            ))}
-          </Tbody>
-        </Table>
+            </Thead>
+            <Tbody>
+              {resourceList.map((resource, index) => (
+                <Tr key={index}>
+                  <Td dataLabel={t('Kind')} className="resource-allow-deny-list__kind">
+                    {resource.kind || '-'}
+                  </Td>
+                  <Td dataLabel={t('Group')} className="resource-allow-deny-list__group">
+                    {resource.group || '-'}
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </div>
       ) : (
         <EmptyState headingLevel="h4" icon={CubesIcon} titleText={t('No resources configured')}>
           <EmptyStateBody>{t('This list does not have any resources configured.')}</EmptyStateBody>
         </EmptyState>
       )}
-    </PageSection>
+    </>
   );
 };