From 820d44418070757d7e97aa74e01950e28caab113 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 19:18:03 +0200
Subject: [PATCH] Neah version mail design fix 7 bis ???

---
 app/mail/page.tsx | 41 ++++++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 18ddd5b..8fe9795 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -756,20 +756,22 @@ export default function MailPage() {
     </div>
   );
 
-  // Add a fixed bottom toolbar for bulk actions
+  // Update the bulk actions toolbar to fit within email list panel
   const renderBulkActionsToolbar = () => {
     if (selectedEmails.length === 0) return null;
 
     return (
-      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2 flex items-center justify-between shadow-lg">
-        <div className="flex items-center gap-1">
-          <span className="text-sm text-gray-600 mr-4">
+      <div className="bg-white border-b border-gray-100 px-4 py-2">
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-sm text-gray-600">
             {selectedEmails.length} selected
           </span>
+        </div>
+        <div className="flex flex-wrap gap-2">
           <Button
             variant="ghost"
             size="sm"
-            className="text-gray-600 hover:text-gray-900"
+            className="text-gray-600 hover:text-gray-900 h-8"
             onClick={() => {
               const allSelectedRead = selectedEmails.every(id => 
                 emails.find(email => email.id.toString() === id)?.read
@@ -777,38 +779,41 @@ export default function MailPage() {
               handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
             }}
           >
-            <EyeOff className="h-4 w-4 mr-2" />
-            Mark as {selectedEmails.every(id => 
-              emails.find(email => email.id.toString() === id)?.read
-            ) ? 'unread' : 'read'}
+            <EyeOff className="h-4 w-4 mr-1.5" />
+            <span className="text-sm">
+              Mark {selectedEmails.every(id => 
+                emails.find(email => email.id.toString() === id)?.read
+              ) ? 'unread' : 'read'}
+            </span>
           </Button>
           <Button
             variant="ghost"
             size="sm"
-            className="text-gray-600 hover:text-gray-900"
+            className="text-gray-600 hover:text-gray-900 h-8"
             onClick={() => handleBulkAction('archive')}
           >
-            <Archive className="h-4 w-4 mr-2" />
-            Archive
+            <Archive className="h-4 w-4 mr-1.5" />
+            <span className="text-sm">Archive</span>
           </Button>
           <Button
             variant="ghost"
             size="sm"
-            className="text-red-600 hover:text-red-700"
+            className="text-red-600 hover:text-red-700 h-8"
             onClick={() => handleBulkAction('delete')}
           >
-            <Trash2 className="h-4 w-4 mr-2" />
-            Delete
+            <Trash2 className="h-4 w-4 mr-1.5" />
+            <span className="text-sm">Delete</span>
           </Button>
         </div>
       </div>
     );
   };
 
-  // Update the email list wrapper to include the bulk actions toolbar
+  // Update the email list to include the toolbar right after the header
   const renderEmailList = () => (
-    <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col relative">
+    <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
       {renderEmailListHeader()}
+      {renderBulkActionsToolbar()}
       
       <div 
         className="flex-1 overflow-y-auto"
@@ -834,8 +839,6 @@ export default function MailPage() {
           </div>
         )}
       </div>
-
-      {renderBulkActionsToolbar()}
     </div>
   );