Independent Panel: make title shrink with ellipsis to keep util group visible\n\n- Wrap session name in .chat-list-title and apply min-width:0 + ellipsis\n- Ensure util group is non-flexible width; prevents delete icon being clipped\n\nWhy: Regression where long titles push or hide the delete icon despite no actual text increase; this restores expected flex constraints.

Author: PeterDaveHello

src/pages/IndependentPanel/App.jsx

@@ -278,7 +278,7 @@ function App() {
                     }
                   }}
                 >
-                  {session.sessionName}
+                  <span className="chat-list-title">{session.sessionName}</span>
                   <span
                     className="gpt-util-group"
                     onClick={(e) => {

src/pages/IndependentPanel/styles.scss

@@ -79,15 +79,9 @@
     width: 60px;
   }
 
-  // Keep search visible even when collapsed (compact style)
+  // Keep search visible even when collapsed (same vertical sizing)
   .chat-sidebar.collapsed .search-container {
     display: block;
-    margin-top: 8px;
-  }
-  .chat-sidebar.collapsed .search-input {
-    min-height: 28px;
-    padding: 4px 6px;
-    font-size: 12px;
   }
 
   .chat-sidebar:hover,
@@ -171,6 +165,23 @@
     justify-content: space-between;
   }
 
+  // Ensure title shrinks and ellipsizes, keeping util group visible
+  .chat-list-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: 8px;
+  }
+
+  .gpt-util-group {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+
   .normal-button {
     width: 100%;
     min-height: 40px;