From 48236ee0efb250090e8646e264acb65d6e1f5d09 Mon Sep 17 00:00:00 2001
From: David Hill <iamdavidhill@gmail.com>
Date: Sat, 24 Jan 2026 18:57:46 +0000
Subject: [PATCH] feat(ui): add critical shadow for comment input validation,
 set editor popover radius to 14px

---
 packages/app/src/pages/session.tsx          | 6 +++---
 packages/ui/src/components/line-comment.css | 1 +
 packages/ui/src/styles/tailwind/index.css   | 1 +
 packages/ui/src/styles/theme.css            | 5 +++++
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index 8ccf04108..130384257 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -2100,9 +2100,9 @@ export default function Page() {
                                   <textarea
                                     ref={textarea}
                                     classList={{
-                                      "w-full resize-vertical p-2 rounded-[6px] bg-surface-base border text-text-strong text-12-regular leading-5 focus:outline-none focus:shadow-xs-border-select": true,
-                                      "border-transparent": !draftError(),
-                                      "border-border-critical-base": draftError(),
+                                      "w-full resize-vertical p-2 rounded-[6px] bg-surface-base text-text-strong text-12-regular leading-5 focus:outline-none": true,
+                                      "focus:shadow-xs-border-select": !draftError(),
+                                      "shadow-xs-border-critical-base": draftError(),
                                     }}
                                     rows={3}
                                     placeholder="Add comment"
diff --git a/packages/ui/src/components/line-comment.css b/packages/ui/src/components/line-comment.css
index be682dc05..52bd00030 100644
--- a/packages/ui/src/components/line-comment.css
+++ b/packages/ui/src/components/line-comment.css
@@ -46,4 +46,5 @@
   width: 380px;
   max-width: min(380px, calc(100vw - 48px));
   padding: 8px;
+  border-radius: 14px;
 }
diff --git a/packages/ui/src/styles/tailwind/index.css b/packages/ui/src/styles/tailwind/index.css
index f67e9f021..f7ce21ad9 100644
--- a/packages/ui/src/styles/tailwind/index.css
+++ b/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-xs-border-critical-base: var(--shadow-xs-border-critical-base);
   --shadow-lg-border-base: var(--shadow-lg-border-base);
 
   --animate-pulse: var(--animate-pulse);
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 5ab0db123..f36849762 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -76,6 +76,11 @@
   --shadow-xs-border-hover:
     0 0 0 1px var(--border-weak-selected, rgba(0, 112, 255, 0.22)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
     0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+  --shadow-xs-border-critical-base:
+    0 0 0 1px var(--border-critical-selected, #FC543A);
+  --shadow-xs-border-critical-focus:
+    0 0 0 3px var(--border-critical-weak, rgba(251, 34, 0, 0.18)), 0 0 0 1px var(--border-critical-selected, #FC543A),
+  0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
   --shadow-lg-border-base:
     0 0 0 1px var(--border-weak-base, rgba(0, 0, 0, 0.07)), 0 36px 80px 0 rgba(0, 0, 0, 0.03),
     0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05),