UI fixes in reviews page

Author: vas3a

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx

@@ -6,6 +6,7 @@ import { ReviewsContextModel, ScorecardQuestion } from '~/apps/review/src/lib/mo
 import { createFeedbackComment } from '~/apps/review/src/lib/services'
 import { useReviewsContext } from '~/apps/review/src/pages/reviews/ReviewsContext'
 import { EnvironmentConfig } from '~/config'
+import { Tooltip } from '~/libs/ui'
 
 import { ScorecardViewerContextValue, useScorecardViewerContext } from '../../ScorecardViewer.context'
 import { ScorecardQuestionRow } from '../ScorecardQuestionRow'
@@ -61,11 +62,21 @@ const AiFeedback: FC<AiFeedbackProps> = props => {
                 />
             )}
         >
-            {isYesNo && (
-                <p>
-                    <strong>{feedback.questionScore ? 'Yes' : 'No'}</strong>
-                </p>
-            )}
+            <p>
+                <strong>
+                    {isYesNo && (feedback.questionScore ? 'Yes' : 'No')}
+                    {!isYesNo && (
+                        <Tooltip
+                            content={`On a scale of ${props.question.scaleMin} to ${props.question.scaleMax}`}
+                            triggerOn='hover'
+                        >
+                            <span>
+                                {feedback.questionScore}
+                            </span>
+                        </Tooltip>
+                    )}
+                </strong>
+            </p>
 
             <MarkdownReview value={feedback.content} />
 

src/apps/review/src/lib/components/TableReview/TableReview.tsx

@@ -671,6 +671,7 @@ export const TableReview: FC<TableReviewProps> = (props: TableReviewProps) => {
                 type: 'element',
             })
         }
+
         if (props.aiReviewers) {
             baseColumns.push({
                 columnId: 'ai-reviews-table',

src/apps/review/src/pages/reviews/components/ReviewsSidebar/ReviewsSidebar.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import { ReviewsContextModel } from '~/apps/review/src/lib/models'
 import { AiWorkflowRunStatus } from '~/apps/review/src/lib/components/AiReviewsTable'
 import { IconAiReview, IconPhaseReview } from '~/apps/review/src/lib/assets/icons'
-import { IconOutline, IconSolid } from '~/libs/ui'
+import { IconOutline, IconSolid, Tooltip } from '~/libs/ui'
 import StatusLabel from '~/apps/review/src/lib/components/AiReviewsTable/StatusLabel'
 
 import { useReviewsContext } from '../../ReviewsContext'
@@ -37,6 +37,10 @@ const ReviewsSidebar: FC<ReviewsSidebarProps> = props => {
         setIsMobileOpen(false)
     }, [])
 
+    const runUrl = useCallback((workflowId: string) => (
+        `../reviews/${submissionId}?workflowId=${workflowId}&reviewId=${reviewId}`
+    ), [reviewId, submissionId]);
+
     return (
         <div className={classNames(props.className, styles.wrap)}>
             {((workflow && workflowRun) || reviewId) && (
@@ -82,14 +86,20 @@ const ReviewsSidebar: FC<ReviewsSidebarProps> = props => {
                                 }
                                 key={run.id}
                             >
-                                <Link
-                                    to={`../reviews/${submissionId}?workflowId=${run.workflow.id}&reviewId=${reviewId}`}
-                                    onClick={close}
-                                />
-                                <span className={styles.workflowNameWrap}>
-                                    <IconAiReview />
-                                    <span className={styles.workflowName}>{run.workflow.name}</span>
-                                </span>
+                                <Tooltip
+                                    content={run.workflow.name}
+                                    triggerOn='hover'
+                                    disableWrap
+                                >
+                                    <Link
+                                        to={runUrl(run.workflow.id)}
+                                        onClick={close}
+                                    />
+                                    <span className={styles.workflowNameWrap}>
+                                        <IconAiReview />
+                                        <span className={styles.workflowName}>{run.workflow.name}</span>
+                                    </span>
+                                </Tooltip>
                                 <AiWorkflowRunStatus run={run} showScore hideLabel />
                             </li>
                         ))}

src/libs/shared/lib/components/notifications/NotificationsContainer.module.scss

@@ -3,5 +3,5 @@
 .wrap {
     position: relative;
     width: 100%;
-    z-index: 18;
+    z-index: 1;
 }