Merge pull request #1052 from topcoder-platform/PM-590-fixes

PM-589 Improve skills UI

Author: himaniraghav3

src/apps/copilots/src/pages/copilot-opportunity-list/index.tsx

@@ -42,15 +42,29 @@ const tableColumns: TableColumn<CopilotOpportunity>[] = [
         isSortable: false,
         label: 'Skills Required',
         propertyName: 'skills',
-        renderer: (copilotOpportunity: CopilotOpportunity) => (
-            <div className={styles.skillsContainer}>
-                {copilotOpportunity.skills.map((skill: any) => (
-                    <div key={skill.id} className={styles.skillPill}>
-                        {skill.name}
-                    </div>
-                ))}
-            </div>
-        ),
+        renderer: (copilotOpportunity: CopilotOpportunity) => {
+            const visibleSkills = copilotOpportunity.skills.slice(0, 3)
+            const remainingSkills = copilotOpportunity.skills.slice(3)
+            return (
+                <div className={styles.skillsContainer}>
+                    {visibleSkills.map((skill: { id: string | number; name: string }) => (
+                        <div key={skill.id} className={styles.skillPill}>
+                            {skill.name}
+                        </div>
+                    ))}
+                    {remainingSkills.length > 0 && (
+                        <div
+                            className={styles.skillPill}
+                            title={remainingSkills.map(skill => skill.name)
+                                .join(', ')}
+                        >
+                            +
+                            {remainingSkills.length}
+                        </div>
+                    )}
+                </div>
+            )
+        },
         type: 'element',
     },
     {

src/apps/copilots/src/pages/copilot-opportunity-list/styles.module.scss

@@ -8,12 +8,12 @@
 }
 
 .skillPill {
-    background-color: #aaaaaa;
+    background-color: #d6d6d6;
     color: #333;
     padding: 4px 8px;
     border-radius: 10px;
     white-space: break-spaces;
-    font-size: 14px;
+    font-size: 11px;
 }
 
 .status {