From 35c3f86c82edee4a419d1dc7be7cec05c8a954ef Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Thu, 25 Jun 2026 01:18:31 -0700
Subject: [PATCH] Style commit text area to match input tokens and fix disabled
 state (#6339)

* Style commit text area to match input tokens and fix disabled state

- Update borders and shadows to match standard input tokens.
- Style the disabled state explicitly to prevent Chromium's user-agent
  styles from washing out the field outline.
- Add dark mode background styling overrides.

* Improve timeline items assertions in work-item-details test

Extract timelineItems to a local variable and add an explicit null check to prevent TypeScript compilation errors when calling the .at method.
---
 src/main/github/work-item-details.test.ts              | 10 +++++++---
 .../src/components/right-sidebar/SourceControl.tsx     |  4 +++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/main/github/work-item-details.test.ts b/src/main/github/work-item-details.test.ts
index 5343c00813f..a36ac97e0fa 100644
--- a/src/main/github/work-item-details.test.ts
+++ b/src/main/github/work-item-details.test.ts
@@ -283,9 +283,13 @@ describe('getWorkItemDetails', () => {
         call[0].includes('repos/acme/widgets/issues/923/timeline?per_page=100&page=7')
       )
     ).toBe(false)
-    expect(details?.timelineItems).toHaveLength(300)
-    expect(details?.timelineItems.at(0)).toMatchObject({ assignee: 'assignee-3-0' })
-    expect(details?.timelineItems.at(-1)).toMatchObject({ assignee: 'assignee-6-89' })
+    const timelineItems = details?.timelineItems
+    expect(timelineItems).toHaveLength(300)
+    if (!timelineItems) {
+      throw new Error('Expected timeline items to be present')
+    }
+    expect(timelineItems.at(0)).toMatchObject({ assignee: 'assignee-3-0' })
+    expect(timelineItems.at(-1)).toMatchObject({ assignee: 'assignee-6-89' })
   })
 
   it('falls back to REST + GraphQL when the collapsed issue query fails', async () => {
diff --git a/src/renderer/src/components/right-sidebar/SourceControl.tsx b/src/renderer/src/components/right-sidebar/SourceControl.tsx
index 45da0012ddd..74fa804f48b 100644
--- a/src/renderer/src/components/right-sidebar/SourceControl.tsx
+++ b/src/renderer/src/components/right-sidebar/SourceControl.tsx
@@ -6501,7 +6501,9 @@ export function CommitArea({
             aria-describedby={describedBy || undefined}
             // Why: reserve right padding so typed text does not slide under the
             // absolute-positioned Generate icon in the top-right corner.
-            className={`mt-0.5 min-h-14 w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none placeholder:text-muted-foreground/70 focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${
+            // Why: match Input surface tokens and pin disabled:border-input so
+            // Chromium's UA disabled styles don't wash out the field outline.
+            className={`mt-0.5 min-h-14 w-full resize-none appearance-none rounded-md border border-input bg-background shadow-xs px-2 py-1.5 text-xs text-foreground outline-none placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:border-input disabled:bg-background disabled:text-foreground disabled:shadow-xs dark:bg-input/30 dark:disabled:bg-input/30 ${
               showGenerate ? 'pr-8' : ''
             }`}
           />