From dc6ca403e95e22e370c8da0186367ca7cde4840e Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Wed, 3 Jun 2026 10:11:48 -0400
Subject: [PATCH] style: align chat-history panel top padding; improve projects
 page contrast

- Add pt-2 to the chat-history panel so its top spacing matches the other
  side panels (agent builder, skills, files, etc.)
- Projects grid + workspace now use the darkest surface for the page
  (surface-primary) with cards, inputs, and the composer one step lighter
  (surface-secondary) and tertiary on hover, so cards read as elevated
  rather than darker than the background
---
 client/src/components/Projects/ProjectWorkspace.tsx    |  8 ++++----
 client/src/components/Projects/ProjectsView.tsx        | 10 +++++-----
 .../components/UnifiedSidebar/ConversationsSection.tsx |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Projects/ProjectWorkspace.tsx b/client/src/components/Projects/ProjectWorkspace.tsx
index 16691a5dfa..e904029dff 100644
--- a/client/src/components/Projects/ProjectWorkspace.tsx
+++ b/client/src/components/Projects/ProjectWorkspace.tsx
@@ -126,7 +126,7 @@ export default function ProjectWorkspace() {
   }
 
   return (
-    <main className="flex h-full min-h-0 flex-col overflow-y-auto bg-presentation text-text-primary">
+    <main className="flex h-full min-h-0 flex-col overflow-y-auto bg-surface-primary text-text-primary">
       <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col px-4 pb-10 pt-4 md:px-6 lg:pt-8">
         <button
           type="button"
@@ -157,12 +157,12 @@ export default function ProjectWorkspace() {
           type="button"
           onClick={startProjectChat}
           className={cn(
-            'mt-6 flex w-full items-center gap-3 rounded-[26px] border border-border-medium bg-surface-primary px-3.5 py-3 text-left shadow-sm transition-colors',
-            'hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
+            'mt-6 flex w-full items-center gap-3 rounded-[26px] border border-border-medium bg-surface-secondary px-3.5 py-3 text-left shadow-sm transition-colors',
+            'hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
           )}
           aria-label={localize('com_ui_new_chat_in_project', { name: project.name })}
         >
-          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-secondary text-text-primary">
+          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-tertiary text-text-primary">
             <Plus className="h-4 w-4" aria-hidden="true" />
           </span>
           <span className="min-w-0 flex-1 truncate text-text-secondary">
diff --git a/client/src/components/Projects/ProjectsView.tsx b/client/src/components/Projects/ProjectsView.tsx
index ff852600d5..e493fa2689 100644
--- a/client/src/components/Projects/ProjectsView.tsx
+++ b/client/src/components/Projects/ProjectsView.tsx
@@ -100,7 +100,7 @@ export default function ProjectsView() {
   };
 
   return (
-    <main className="flex h-full min-h-0 flex-col overflow-auto bg-presentation text-text-primary">
+    <main className="flex h-full min-h-0 flex-col overflow-auto bg-surface-primary text-text-primary">
       <div className="container mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-8 md:px-6 lg:pt-12">
         <div className="flex flex-wrap items-center justify-between gap-3">
           <h1 className="text-2xl font-bold tracking-tight text-text-primary md:text-3xl">
@@ -122,7 +122,7 @@ export default function ProjectsView() {
                 <Ariakit.MenuButton
                   aria-label={localize('com_ui_sort_projects_by')}
                   className={cn(
-                    'inline-flex h-10 items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-medium bg-surface-primary px-3 text-sm font-medium text-text-primary transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary disabled:pointer-events-none disabled:opacity-50 sm:w-44',
+                    'inline-flex h-10 items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-medium bg-surface-secondary px-3 text-sm font-medium text-text-primary transition-colors hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary disabled:pointer-events-none disabled:opacity-50 sm:w-44',
                     isSortMenuOpen && 'bg-surface-hover text-text-primary',
                   )}
                 >
@@ -155,7 +155,7 @@ export default function ProjectsView() {
               value={search}
               onChange={(event) => setSearch(event.target.value)}
               placeholder={localize('com_ui_search_projects')}
-              className="border-border-medium bg-surface-primary pl-9 text-text-primary placeholder:text-text-secondary focus-visible:ring-2 focus-visible:ring-ring-primary"
+              className="border-border-medium bg-surface-secondary pl-9 text-text-primary placeholder:text-text-secondary focus-visible:ring-2 focus-visible:ring-ring-primary"
             />
           </label>
           <div className="flex items-center">
@@ -184,8 +184,8 @@ export default function ProjectsView() {
                   key={project._id}
                   type="button"
                   className={cn(
-                    'group/project flex min-h-[8.5rem] flex-col rounded-xl border border-border-light bg-surface-primary p-4 text-left transition-colors',
-                    'hover:border-border-medium hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
+                    'group/project flex min-h-[8.5rem] flex-col rounded-xl border border-border-medium bg-surface-secondary p-4 text-left transition-colors',
+                    'hover:border-border-heavy hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
                   )}
                   onClick={() => navigate(`/projects/${project._id}`)}
                 >
diff --git a/client/src/components/UnifiedSidebar/ConversationsSection.tsx b/client/src/components/UnifiedSidebar/ConversationsSection.tsx
index a946be4766..74d4ed893c 100644
--- a/client/src/components/UnifiedSidebar/ConversationsSection.tsx
+++ b/client/src/components/UnifiedSidebar/ConversationsSection.tsx
@@ -106,7 +106,7 @@ const ConversationsSection = memo(() => {
 
   return (
     <div
-      className="flex h-full min-h-0 flex-col overflow-hidden pb-3"
+      className="flex h-full min-h-0 flex-col overflow-hidden pb-3 pt-2"
       role="region"
       aria-label={localize('com_ui_chat_history')}
     >