From 7ad454f9a29cf079d12648f685c79ed8096d14fb Mon Sep 17 00:00:00 2001
From: SSU-WEI HUANG <stanley.yellow1@gmail.com>
Date: Sat, 1 Aug 2026 01:17:23 +0800
Subject: [PATCH] fix(web): prioritize session names in narrow sidebar (#1029)

---
 web/src/components/SessionRowSummary.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/src/components/SessionRowSummary.tsx b/web/src/components/SessionRowSummary.tsx
index 827786e9..df94b8bd 100644
--- a/web/src/components/SessionRowSummary.tsx
+++ b/web/src/components/SessionRowSummary.tsx
@@ -150,10 +150,13 @@ export function SessionRowSummary(props: {
 
     return (
         <div className={`flex w-full min-w-0 flex-col gap-1 ${className ?? ''}`}>
-            <div className={`flex items-center justify-between gap-3 ${!s.active ? 'opacity-50' : ''}`}>
+            <div className={`grid grid-cols-[minmax(9rem,1fr)_minmax(0,max-content)] items-center gap-2 ${!s.active ? 'opacity-50' : ''}`}>
                 <div className="flex min-w-0 items-center gap-2">
                     <AgentFlavorIcon flavor={s.metadata?.flavor} className="h-4 w-4 shrink-0 -translate-y-px" />
-                    <div className={`truncate text-sm font-medium ${s.active ? 'text-[var(--app-fg)]' : 'text-[var(--app-hint)]'}`}>
+                    <div
+                        className={`min-w-0 flex-1 truncate text-sm font-medium ${s.active ? 'text-[var(--app-fg)]' : 'text-[var(--app-hint)]'}`}
+                        title={sessionName}
+                    >
                         {sessionName}
                     </div>
                     {s.active && s.thinking ? (
@@ -194,20 +197,20 @@ export function SessionRowSummary(props: {
                         </span>
                     ) : null}
                 </div>
-                <div className="flex shrink-0 items-center gap-2 text-xs">
+                <div className="flex min-w-0 items-center justify-end gap-2 overflow-hidden text-xs">
                     {todoProgress ? (
-                        <span className="flex items-center gap-1 text-[var(--app-hint)]">
+                        <span className="flex shrink-0 items-center gap-1 text-[var(--app-hint)]">
                             <BulbIcon className="h-3 w-3" />
                             {todoProgress.completed}/{todoProgress.total}
                         </span>
                     ) : null}
                     {!attention && s.pendingRequestsCount > 0 ? (
-                        <span className="text-[var(--app-badge-warning-text)]">
+                        <span className="shrink-0 text-[var(--app-badge-warning-text)]">
                             {t('session.item.pending')} {s.pendingRequestsCount}
                         </span>
                     ) : null}
                     {timeLabel ? (
-                        <span className="tabular-nums text-[var(--app-hint)]">{timeLabel}</span>
+                        <span className="min-w-0 truncate whitespace-nowrap tabular-nums text-[var(--app-hint)]">{timeLabel}</span>
                     ) : null}
                 </div>
             </div>