fix(ui): style comment popovers - 14px radius, move label below, use text-weak for label, text-strong 14px for comment

packages/app/src/pages/session.tsx

@@ -2030,13 +2030,13 @@ export default function Page() {
                                 <Icon name="comment" size="small" style={{ color: "var(--white)" }} />
                               </button>
                               <Show when={openedComment() === comment.id}>
-                                <div class="absolute top-0 right-[calc(100%+12px)] z-40 min-w-[200px] max-w-[320px] rounded-md bg-surface-raised-stronger-non-alpha border border-border-base shadow-md p-3">
+                                <div class="absolute top-0 right-[calc(100%+12px)] z-40 min-w-[200px] max-w-[320px] rounded-[14px] bg-surface-raised-stronger-non-alpha border border-border-base p-3">
                                   <div class="flex flex-col gap-1.5">
-                                    <div class="text-12-regular text-text-base whitespace-pre-wrap">
+                                    <div class="text-14-regular text-text-strong whitespace-pre-wrap">
                                       {comment.comment}
                                     </div>
-                                    <div class="text-12-medium text-text-strong whitespace-nowrap">
-                                      {getFilename(comment.file)}:{commentLabel(comment.selection)}
+                                    <div class="text-12-medium text-text-weak whitespace-nowrap">
+                                      Comment on {commentLabel(comment.selection)}
                                     </div>
                                   </div>
                                 </div>

packages/ui/src/components/session-review.css

@@ -82,10 +82,9 @@
     z-index: 6;
     min-width: 200px;
     max-width: min(320px, calc(100vw - 48px));
-    border-radius: var(--radius-md);
+    border-radius: 14px;
     background-color: var(--surface-raised-stronger-non-alpha);
-    border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
-    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border-base);
     padding: 12px;
   }
 
@@ -271,15 +270,15 @@
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-medium);
-    color: var(--text-strong);
+    color: var(--text-weak);
   }
 
   [data-slot="session-review-comment-hover-text"],
   [data-slot="session-review-comment-popover-text"] {
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-regular);
-    color: var(--text-base);
+    color: var(--text-strong);
     white-space: pre-wrap;
   }
 

packages/ui/src/components/session-review.tsx

@@ -588,7 +588,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                                 <div data-slot="session-review-comment-popover">
                                   <div data-slot="session-review-comment-popover-text">{comment.comment}</div>
                                   <div data-slot="session-review-comment-popover-label">
-                                    {getFilename(comment.file)}:{selectionLabel(comment.selection)}
+                                    Comment on {selectionLabel(comment.selection)}
                                   </div>
                                 </div>
                               </div>

packages/ui/src/styles/tailwind/index.css

@@ -66,6 +66,7 @@
   --shadow-xs-border-select: var(--shadow-xs-border-select);
   --shadow-xs-border-focus: var(--shadow-xs-border-focus);
   --shadow-xs-border-hover: var(--shadow-xs-border-hover);
+  --shadow-lg-border-base: var(--shadow-lg-border-base);
 
   --animate-pulse: var(--animate-pulse);
 }