fix session history cards title wrapping early (#6854)

ui/desktop/src/components/sessions/SessionListView.tsx

@@ -617,62 +617,23 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
       return (
         <Card
           onClick={handleCardClick}
-          className="session-item h-full py-3 px-4 hover:shadow-default cursor-pointer transition-all duration-150 flex flex-col justify-between relative group"
+          className="h-full py-3 px-4 hover:shadow-default cursor-pointer transition-all duration-150 flex flex-col justify-between relative group"
           ref={(el) => setSessionRefs(session.id, el)}
         >
-          <div className="flex items-start justify-between gap-2 mb-1">
+          <div>
-            <h3 className="text-base break-words line-clamp-2 flex-1 min-w-0">{displayName}</h3>
+            <h3 className="text-base break-words line-clamp-2 w-full mb-1">{displayName}</h3>
-            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+            <div className="flex-1 mt-2">
-              <button
+              <div className="flex items-center text-text-muted text-xs">
-                onClick={handleOpenInNewWindowClick}
+                <Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
-                className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+                <span>{formatMessageTimestamp(Date.parse(session.updated_at) / 1000)}</span>
-                title="Open in new window"
+              </div>
-              >
+              <div className="flex items-center text-text-muted text-xs">
-                <ExternalLink className="w-3 h-3 text-textSubtle hover:text-textStandard" />
+                <Folder className="w-3 h-3 mr-1 flex-shrink-0" />
-              </button>
+                <span className="truncate">{session.working_dir}</span>
-              <button
+              </div>
-                onClick={handleEditClick}
-                className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
-                title="Edit session name"
-              >
-                <Edit2 className="w-3 h-3 text-textSubtle hover:text-textStandard" />
-              </button>
-              <button
-                onClick={handleDuplicateClick}
-                className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
-                title="Duplicate session"
-              >
-                <Copy className="w-3 h-3 text-textSubtle hover:text-textStandard" />
-              </button>
-              <button
-                onClick={handleDeleteClick}
-                className="p-2 rounded hover:bg-red-50 dark:hover:bg-red-900/20 cursor-pointer transition-colors"
-                title="Delete session"
-              >
-                <Trash2 className="w-3 h-3 text-red-500 hover:text-red-600" />
-              </button>
-              <button
-                onClick={handleExportClick}
-                className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
-                title="Export session"
-              >
-                <Download className="w-3 h-3 text-textSubtle hover:text-textStandard" />
-              </button>
             </div>
           </div>
-
+          <div className="flex items-center justify-between mt-1">
-          <div className="flex-1">
-            <div className="flex items-center text-text-muted text-xs mb-1">
-              <Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
-              <span>{formatMessageTimestamp(Date.parse(session.updated_at) / 1000)}</span>
-            </div>
-            <div className="flex items-center text-text-muted text-xs mb-1">
-              <Folder className="w-3 h-3 mr-1 flex-shrink-0" />
-              <span className="truncate">{session.working_dir}</span>
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between mt-1 pt-2">
             <div className="flex items-center space-x-3 text-xs text-text-muted">
               <div className="flex items-center">
                 <MessageSquareText className="w-3 h-3 mr-1" />
@@ -708,6 +669,43 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
               )}
             </div>
           </div>
+          <div className="flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            <button
+              onClick={handleOpenInNewWindowClick}
+              className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+              title="Open in new window"
+            >
+              <ExternalLink className="w-3 h-3 text-textSubtle hover:text-textStandard" />
+            </button>
+            <button
+              onClick={handleEditClick}
+              className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+              title="Edit session name"
+            >
+              <Edit2 className="w-3 h-3 text-textSubtle hover:text-textStandard" />
+            </button>
+            <button
+              onClick={handleDuplicateClick}
+              className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+              title="Duplicate session"
+            >
+              <Copy className="w-3 h-3 text-textSubtle hover:text-textStandard" />
+            </button>
+            <button
+              onClick={handleDeleteClick}
+              className="p-2 rounded hover:bg-red-50 dark:hover:bg-red-900/20 cursor-pointer transition-colors"
+              title="Delete session"
+            >
+              <Trash2 className="w-3 h-3 text-red-500 hover:text-red-600" />
+            </button>
+            <button
+              onClick={handleExportClick}
+              className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+              title="Export session"
+            >
+              <Download className="w-3 h-3 text-textSubtle hover:text-textStandard" />
+            </button>
+          </div>
         </Card>
       );
     });

ui/desktop/src/components/sessions/SessionsInsights.tsx

@@ -297,7 +297,6 @@ export function SessionInsights() {
               </div>
               <div className="space-y-1 min-h-[96px] transition-all duration-300 ease-in-out">
                 {isLoadingSessions ? (
-                  // Show skeleton while sessions are loading
                   <>
                     <div className="flex items-center justify-between py-1 px-2">
                       <div className="flex items-center space-x-2">
@@ -325,7 +324,7 @@ export function SessionInsights() {
                   recentSessions.map((session, index) => (
                     <div
                       key={session.id}
-                      className="flex items-center justify-between text-sm py-1 px-2 rounded-md hover:bg-background-muted cursor-pointer transition-colors session-item"
+                      className="flex items-center justify-between text-sm py-1 px-2 rounded-md hover:bg-background-muted cursor-pointer transition-colors"
                       onClick={() => handleSessionClick(session)}
                       role="button"
                       tabIndex={0}

ui/desktop/src/styles/main.css

@@ -678,38 +678,6 @@ p > code.bg-inline-code {
   transform-origin: bottom left;
 }
 
-/* Session list optimizations */
-.session-grid {
-  /* Use CSS Grid for better performance */
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1rem;
-  /* Optimize for large lists */
-  contain: layout style paint;
-}
-
-.session-item {
-  /* Default state - visible and positioned */
-  opacity: 1;
-  transform: translateY(0) translateZ(0);
-
-  /* Optimize individual session cards */
-  contain: layout style;
-  /* Use hardware acceleration */
-  backface-visibility: hidden;
-  /* Ensure smooth interactions */
-  will-change: auto;
-}
-
-.session-item:hover {
-  /* Only use will-change during hover */
-  will-change: transform, box-shadow;
-}
-
-.session-item:not(:hover) {
-  will-change: auto;
-}
-
 /* Optimize session skeleton loading */
 .session-skeleton {
   contain: layout style paint;