From 1ed2f93290de1bad1763b11b8032fb04cbb7bfb0 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Thu, 9 Jul 2026 11:36:42 +1000
Subject: [PATCH] Minor UI updates

---
 .../FlexiTalentPage.module.scss               | 33 ++++++++-
 .../EngagementsView/EngagementsView.tsx       | 70 ++++++++++++-------
 2 files changed, 76 insertions(+), 27 deletions(-)

diff --git a/src/apps/customer-portal/src/pages/flexi-talent/FlexiTalentPage/FlexiTalentPage.module.scss b/src/apps/customer-portal/src/pages/flexi-talent/FlexiTalentPage/FlexiTalentPage.module.scss
index b83dcd071..928c5fe75 100644
--- a/src/apps/customer-portal/src/pages/flexi-talent/FlexiTalentPage/FlexiTalentPage.module.scss
+++ b/src/apps/customer-portal/src/pages/flexi-talent/FlexiTalentPage/FlexiTalentPage.module.scss
@@ -542,6 +542,10 @@
     }
 }
 
+.descriptionFrame {
+    position: relative;
+}
+
 .descriptionRichText {
     color: $black-80;
     font-size: 14px;
@@ -614,7 +618,7 @@
 
 .descriptionRichTextCollapsed {
     overflow: hidden;
-    max-height: 147px;
+    max-height: 126px;
 }
 
 .descriptionToggleButton {
@@ -627,6 +631,7 @@
     font-size: 13px;
     font-weight: 700;
     line-height: 18px;
+    margin-top: 4px;
     padding: 2px 0;
 
     &:hover {
@@ -634,6 +639,27 @@
     }
 }
 
+.descriptionToggleButtonCollapsed {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    min-height: 21px;
+    background: $tc-white;
+    line-height: 21px;
+    margin-top: 0;
+    padding: 0 0 0 28px;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 100%;
+        bottom: 0;
+        width: 28px;
+        background: linear-gradient(90deg, rgba($tc-white, 0), $tc-white);
+    }
+}
+
 .skillList,
 .workLinks {
     display: flex;
@@ -667,6 +693,11 @@
     }
 }
 
+.detailHeaderWorkLinks {
+    border-bottom: 0;
+    padding-bottom: 0;
+}
+
 .assignmentRow {
     display: flex;
     flex-direction: column;
diff --git a/src/apps/customer-portal/src/pages/flexi-talent/components/EngagementsView/EngagementsView.tsx b/src/apps/customer-portal/src/pages/flexi-talent/components/EngagementsView/EngagementsView.tsx
index f09d3c181..4d83b0e64 100644
--- a/src/apps/customer-portal/src/pages/flexi-talent/components/EngagementsView/EngagementsView.tsx
+++ b/src/apps/customer-portal/src/pages/flexi-talent/components/EngagementsView/EngagementsView.tsx
@@ -32,7 +32,7 @@ import styles from '../../FlexiTalentPage/FlexiTalentPage.module.scss'
 
 const ENGAGEMENTS_PER_PAGE = 10
 const SEARCH_DEBOUNCE_MS = 300
-const DESCRIPTION_COLLAPSED_HEIGHT_PX = 147
+const DESCRIPTION_COLLAPSED_HEIGHT_PX = 126
 const DESCRIPTION_OVERFLOW_TOLERANCE_PX = 1
 
 type DetailState = 'loading' | 'empty' | 'error' | 'ready'
@@ -141,7 +141,17 @@ function renderEngagementDescriptionHtml(description?: string | null): string {
 }
 
 /**
- * Checks whether the rendered description is taller than the default collapsed region.
+ * Checks whether engagement detail includes any Work Manager links.
+ *
+ * @param workLinks Normalized Work Manager links from the engagement detail service.
+ * @returns Whether any Work Manager URL is available.
+ */
+function hasWorkLinks(workLinks: FlexiEngagementDetail['workLinks']): boolean {
+    return Boolean(workLinks.projectUrl || workLinks.engagementUrl || workLinks.assigneeDetailsUrl)
+}
+
+/**
+ * Checks whether the rendered description is taller than the six-line collapsed region.
  *
  * @param element Rendered rich-text description container.
  * @returns True when the container needs a See More / See Less toggle.
@@ -707,6 +717,32 @@ export const EngagementsView: FC = () => {
                         <div className={styles.detailHeader}>
                             <span className={styles.statusPill}>{formatStatusLabel(detailData.status)}</span>
                             <h3>{detailData.engagementTitle}</h3>
+                            {hasWorkLinks(detailData.workLinks) && (
+                                <div className={classNames(styles.workLinks, styles.detailHeaderWorkLinks)}>
+                                    {detailData.workLinks.projectUrl && (
+                                        <a href={detailData.workLinks.projectUrl} rel='noreferrer' target='_blank'>
+                                            Project
+                                            <IconOutline.ExternalLinkIcon />
+                                        </a>
+                                    )}
+                                    {detailData.workLinks.engagementUrl && (
+                                        <a href={detailData.workLinks.engagementUrl} rel='noreferrer' target='_blank'>
+                                            Engagement
+                                            <IconOutline.ExternalLinkIcon />
+                                        </a>
+                                    )}
+                                    {detailData.workLinks.assigneeDetailsUrl && (
+                                        <a
+                                            href={detailData.workLinks.assigneeDetailsUrl}
+                                            rel='noreferrer'
+                                            target='_blank'
+                                        >
+                                            Assignee Details
+                                            <IconOutline.ExternalLinkIcon />
+                                        </a>
+                                    )}
+                                </div>
+                            )}
                             <p>{detailData.projectName || 'Project name unavailable'}</p>
                             <span className={styles.detailCapacity}>
                                 {formatMemberCount(detailData.assignedMemberCount, detailData.requiredMemberCount)}
@@ -716,7 +752,7 @@ export const EngagementsView: FC = () => {
                         <div className={styles.detailSection}>
                             <h4>Description</h4>
                             {sanitizedDescriptionHtml ? (
-                                <>
+                                <div className={styles.descriptionFrame}>
                                     <div
                                         className={classNames(
                                             styles.descriptionRichText,
@@ -728,14 +764,17 @@ export const EngagementsView: FC = () => {
                                     {isDescriptionCollapsible && (
                                         <button
                                             aria-expanded={isDescriptionExpanded}
-                                            className={styles.descriptionToggleButton}
+                                            className={classNames(
+                                                styles.descriptionToggleButton,
+                                                !isDescriptionExpanded && styles.descriptionToggleButtonCollapsed,
+                                            )}
                                             onClick={handleDescriptionToggle}
                                             type='button'
                                         >
                                             {isDescriptionExpanded ? 'See Less' : 'See More'}
                                         </button>
                                     )}
-                                </>
+                                </div>
                             ) : (
                                 <p>No description provided.</p>
                             )}
@@ -754,27 +793,6 @@ export const EngagementsView: FC = () => {
                             )}
                         </div>
 
-                        <div className={styles.workLinks}>
-                            {detailData.workLinks.projectUrl && (
-                                <a href={detailData.workLinks.projectUrl} rel='noreferrer' target='_blank'>
-                                    Project
-                                    <IconOutline.ExternalLinkIcon />
-                                </a>
-                            )}
-                            {detailData.workLinks.engagementUrl && (
-                                <a href={detailData.workLinks.engagementUrl} rel='noreferrer' target='_blank'>
-                                    Engagement
-                                    <IconOutline.ExternalLinkIcon />
-                                </a>
-                            )}
-                            {detailData.workLinks.assigneeDetailsUrl && (
-                                <a href={detailData.workLinks.assigneeDetailsUrl} rel='noreferrer' target='_blank'>
-                                    Assignee Details
-                                    <IconOutline.ExternalLinkIcon />
-                                </a>
-                            )}
-                        </div>
-
                         <div className={styles.detailSection}>
                             <h4>Assignments</h4>
                             {detailData.assignments.length > 0 ? (