From c75d4dc9114272dbf7e8bea890d58c0e50dcbc69 Mon Sep 17 00:00:00 2001
From: "Vyctor H. Brzezowski" <krzyszchweski@gmail.com>
Date: Tue, 18 Aug 2026 00:52:00 -0300
Subject: [PATCH] improve(ui): align chat branch and PR rows (#125232)

* improve(ui): align chat branch and PR rows

* improve(ui): collapse absent PR number slot

* improve(ui): give Create PR a neutral chip surface

* improve(ui): rebalance merged PR row contrast

* improve(ui): use standard squircle for PR rows

* fix(ui): consolidate static PR link styling
---
 .../chat/components/chat-pull-requests.ts     | 12 ++--
 ui/src/styles/base.css                        |  1 +
 ui/src/styles/chat/layout.css                 | 61 +++++++++++++------
 3 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/ui/src/pages/chat/components/chat-pull-requests.ts b/ui/src/pages/chat/components/chat-pull-requests.ts
index beee6ae4d1ff..c56644389f60 100644
--- a/ui/src/pages/chat/components/chat-pull-requests.ts
+++ b/ui/src/pages/chat/components/chat-pull-requests.ts
@@ -240,8 +240,10 @@ function renderBranchRow(
     <article class="chat-pr" data-state="branch">
       <span class="chat-pr__link chat-pr__link--static">
         <span class="chat-pr__icon" aria-hidden="true">${icons.gitBranch}</span>
-        <span class="chat-pr__repo">${branch.repo}</span>
-        <span class="chat-pr__branch">${branch.branch}</span>
+        <span class="chat-pr__identity">
+          <span class="chat-pr__repo">${branch.repo}</span>
+          <span class="chat-pr__branch">${branch.branch}</span>
+        </span>
       </span>
       <span class="chat-pr__meta">
         ${renderDiffStats(branch, onOpenSessionDiff)}
@@ -300,8 +302,10 @@ export function renderChatPullRequests(props: {
                 ${merged ? icons.gitMerge : icons.gitPullRequest}
               </span>
               <span class="chat-pr__number">#${pullRequest.number}</span>
-              <span class="chat-pr__repo">${pullRequest.repo}</span>
-              <span class="chat-pr__branch">${pullRequest.branch}</span>
+              <span class="chat-pr__identity">
+                <span class="chat-pr__repo">${pullRequest.repo}</span>
+                <span class="chat-pr__branch">${pullRequest.branch}</span>
+              </span>
             </a>
             <span class="chat-pr__meta">
               ${renderDiffStats(pullRequest)} ${renderChecks(pullRequest)}
diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css
index 06b314d3778c..1886ca2abb69 100644
--- a/ui/src/styles/base.css
+++ b/ui/src/styles/base.css
@@ -343,6 +343,7 @@
   .chat-thread.chat-thread,
   .chat-bubble.chat-bubble,
   .agent-chat__input.agent-chat__input,
+  .chat-pr.chat-pr,
   .nav-item.nav-item,
   .list-item.list-item,
   .sidebar-recent-session.sidebar-recent-session,
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index 233d0cacaa00..531d439a4260 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -2338,7 +2338,8 @@ button.chat-reply-preview--message:disabled {
 }
 
 .chat-pr {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 10px;
   min-width: 0;
@@ -2350,27 +2351,34 @@ button.chat-reply-preview--message:disabled {
 }
 
 .chat-pr[data-state="merged"] {
-  border-color: color-mix(in srgb, var(--pr-merged) 32%, var(--border));
-  background: color-mix(in srgb, var(--pr-merged) 7%, var(--panel));
+  border-color: color-mix(in srgb, var(--pr-merged) 18%, var(--border));
+  background: color-mix(in srgb, var(--pr-merged) 12%, var(--panel));
 }
 
 .chat-pr__link {
-  display: flex;
-  flex: 1;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 18px minmax(4ch, auto) minmax(0, 1fr);
+  align-items: baseline;
   gap: 8px;
   min-width: 0;
   color: var(--text);
   text-decoration: none;
 }
 
+.chat-pr__link--static {
+  grid-template-columns: 18px minmax(0, 1fr);
+  cursor: default;
+}
+
 .chat-pr__link:hover .chat-pr__number {
   text-decoration: underline;
 }
 
 .chat-pr__icon {
   display: grid;
-  flex: 0 0 auto;
+  align-self: center;
+  width: 18px;
+  height: 18px;
   place-items: center;
   color: var(--ok);
 }
@@ -2391,10 +2399,6 @@ button.chat-reply-preview--message:disabled {
   color: var(--muted);
 }
 
-.chat-pr__link--static {
-  cursor: default;
-}
-
 .chat-pr__icon svg,
 .chat-pr__warning svg {
   width: 15px;
@@ -2412,13 +2416,21 @@ button.chat-reply-preview--message:disabled {
 }
 
 .chat-pr__number {
-  flex: 0 0 auto;
+  min-width: 0;
   font-weight: 650;
 }
 
+.chat-pr__identity {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
 .chat-pr__repo {
   flex: 0 0 auto;
-  color: var(--muted);
+  color: var(--text);
+  font-weight: 500;
 }
 
 .chat-pr__branch {
@@ -2601,12 +2613,14 @@ button.chat-pr__diff {
 }
 
 .chat-pr__create {
-  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
   padding: 3px 10px;
-  border: 1px solid var(--border);
+  border: 0;
   border-radius: var(--radius-full);
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
-  color: var(--text);
+  background: color-mix(in srgb, var(--muted) 10%, transparent);
+  color: var(--muted);
   font-size: 12px;
   font-weight: 600;
   text-decoration: none;
@@ -2614,7 +2628,15 @@ button.chat-pr__diff {
 }
 
 .chat-pr__create:hover {
-  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.chat-pr__create:focus-visible {
+  background: var(--bg-hover);
+  color: var(--text);
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
 
 .chat-pr__dismiss {
@@ -2653,8 +2675,7 @@ button.chat-pr__diff {
 }
 
 @media (max-width: 640px) {
-  .chat-pr__branch,
-  .chat-pr__repo {
+  .chat-pr__identity {
     display: none;
   }
 }