From 376c09bda13cbb22c186bb0ede663331cb656dec Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 19:54:41 +0200
Subject: [PATCH] Neah version mail design fix 13

---
 app/mail/page.tsx | 114 ++++++++++++++++++++++++----------------------
 1 file changed, 59 insertions(+), 55 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 319a243..3697a76 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -880,9 +880,9 @@ export default function MailPage() {
         {selectedEmail ? (
           <>
             {/* Email actions header */}
-            <div className="flex-none p-4 border-b border-gray-100">
-              <div className="flex items-center justify-between h-10">
-                <div className="flex items-center gap-2 min-w-0">
+            <div className="flex-none px-4 py-3 border-b border-gray-100">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2 min-w-0 flex-1">
                   <Button
                     variant="ghost"
                     size="icon"
@@ -891,59 +891,63 @@ export default function MailPage() {
                   >
                     <ChevronLeft className="h-5 w-5" />
                   </Button>
-                  <h2 className="text-xl font-semibold text-gray-900 truncate">
-                    {selectedEmail.subject}
-                  </h2>
+                  <div className="min-w-0 flex-1">
+                    <h2 className="text-lg font-semibold text-gray-900 truncate">
+                      {selectedEmail.subject}
+                    </h2>
+                  </div>
                 </div>
-                <div className="flex items-center gap-1 flex-shrink-0">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900 h-9 w-9"
-                    onClick={() => handleReply('reply')}
-                  >
-                    <Reply className="h-5 w-5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900 h-9 w-9"
-                    onClick={() => handleReply('replyAll')}
-                  >
-                    <ReplyAll className="h-5 w-5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900 h-9 w-9"
-                    onClick={() => handleReply('forward')}
-                  >
-                    <Forward className="h-5 w-5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900 h-9 w-9"
-                    onClick={(e) => toggleStarred(selectedEmail.id, e)}
-                  >
-                    <Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900 h-9 w-9"
-                    onClick={() => {/* Add to folder logic */}}
-                  >
-                    <FolderOpen className="h-5 w-5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900 h-9 w-9"
-                    onClick={() => {/* Mark as spam logic */}}
-                  >
-                    <MessageSquare className="h-5 w-5" />
-                  </Button>
+                <div className="flex items-center gap-1 flex-shrink-0 ml-auto">
+                  <div className="flex items-center border-l border-gray-200 pl-4">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={() => handleReply('reply')}
+                    >
+                      <Reply className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={() => handleReply('replyAll')}
+                    >
+                      <ReplyAll className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={() => handleReply('forward')}
+                    >
+                      <Forward className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={(e) => toggleStarred(selectedEmail.id, e)}
+                    >
+                      <Star className={`h-4 w-4 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={() => {/* Add to folder logic */}}
+                    >
+                      <FolderOpen className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
+                      onClick={() => {/* Mark as spam logic */}}
+                    >
+                      <MessageSquare className="h-4 w-4" />
+                    </Button>
+                  </div>
                 </div>
               </div>
             </div>