From 46389167ddd0093b5bd913a38752c4cbec6446b4 Mon Sep 17 00:00:00 2001
From: Neo <54811660+neooriginal@users.noreply.github.com>
Date: Wed, 21 Jan 2026 21:55:00 +0100
Subject: [PATCH] Improve conversation UI layout and consistency

Adjusted class names for SearchBar, DateFilter, and selection mode button to improve layout consistency and prevent overflow. Updated search placeholder text for brevity and fixed indentation for conditional rendering in ConversationSplitView.
---
 .../conversations/ConversationSplitView.tsx   | 19 ++++++++++---------
 .../components/conversations/DateFilter.tsx   |  6 +++---
 .../components/conversations/SearchBar.tsx    |  2 +-
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/web/app/src/components/conversations/ConversationSplitView.tsx b/web/app/src/components/conversations/ConversationSplitView.tsx
index ce0cf795d5..d07b5fcc82 100644
--- a/web/app/src/components/conversations/ConversationSplitView.tsx
+++ b/web/app/src/components/conversations/ConversationSplitView.tsx
@@ -565,9 +565,10 @@ export function ConversationSplitView() {
                 value={searchQuery}
                 onChange={setSearchQuery}
                 onSearch={handleSearch}
-                placeholder="Search conversations..."
-                className="flex-1"
+                placeholder="Search"
+                className="flex-1 min-w-0"
               />
+
               <DateFilter
                 selectedDate={filterDate}
                 onDateChange={handleDateFilterChange}
@@ -576,7 +577,7 @@ export function ConversationSplitView() {
               <button
                 onClick={isSelectionMode ? exitSelectionMode : enterSelectionMode}
                 className={cn(
-                  'flex items-center gap-1.5 px-3 py-1.5 rounded-lg flex-shrink-0',
+                  'flex items-center gap-1.5 px-3 py-1.5 rounded-lg flex-shrink-0 whitespace-nowrap',
                   'text-sm font-medium transition-colors',
                   isSelectionMode
                     ? 'bg-purple-primary/20 text-purple-primary hover:bg-purple-primary/30'
@@ -666,12 +667,12 @@ export function ConversationSplitView() {
                   {isSearching
                     ? 'No conversations found'
                     : filterDate
-                    ? 'No conversations on this date'
-                    : selectedFolderId === FOLDER_STARRED
-                    ? 'No starred conversations'
-                    : selectedFolderId !== FOLDER_ALL
-                    ? 'No conversations in this folder'
-                    : 'No conversations yet'}
+                      ? 'No conversations on this date'
+                      : selectedFolderId === FOLDER_STARRED
+                        ? 'No starred conversations'
+                        : selectedFolderId !== FOLDER_ALL
+                          ? 'No conversations in this folder'
+                          : 'No conversations yet'}
                 </p>
               </div>
             )}
diff --git a/web/app/src/components/conversations/DateFilter.tsx b/web/app/src/components/conversations/DateFilter.tsx
index 9a9ebbdf8a..6231fad836 100644
--- a/web/app/src/components/conversations/DateFilter.tsx
+++ b/web/app/src/components/conversations/DateFilter.tsx
@@ -173,14 +173,14 @@ export function DateFilter({
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
-          'flex items-center gap-2 px-3 py-2 rounded-lg',
+          'flex items-center gap-2 px-3 py-2 rounded-lg flex-shrink-0 whitespace-nowrap',
           'text-sm font-medium transition-all duration-150',
           'border',
           isOpen
             ? 'bg-bg-tertiary border-purple-primary/40 text-text-primary'
             : selectedDate
-            ? 'bg-purple-primary/10 border-purple-primary/30 text-purple-primary'
-            : 'bg-transparent border-transparent text-text-secondary hover:bg-bg-tertiary hover:text-text-primary'
+              ? 'bg-purple-primary/10 border-purple-primary/30 text-purple-primary'
+              : 'bg-transparent border-transparent text-text-secondary hover:bg-bg-tertiary hover:text-text-primary'
         )}
       >
         <Calendar className="w-4 h-4" />
diff --git a/web/app/src/components/conversations/SearchBar.tsx b/web/app/src/components/conversations/SearchBar.tsx
index c70dd1ac89..d7bafac49e 100644
--- a/web/app/src/components/conversations/SearchBar.tsx
+++ b/web/app/src/components/conversations/SearchBar.tsx
@@ -97,7 +97,7 @@ export function SearchBar({
     >
       <div
         className={cn(
-          'flex items-center gap-2 px-3 py-2 rounded-lg',
+          'flex items-center gap-2 px-3 py-2 rounded-lg overflow-hidden',
           'bg-bg-secondary border transition-all duration-150',
           isFocused
             ? 'border-purple-primary/40 ring-2 ring-purple-primary/20'