fix: Align message header content

Mail/Views/Thread/Message/MessageHeader/MessageHeaderDetailView.swift

@@ -30,89 +30,32 @@ import SwiftUI
 struct MessageHeaderDetailView: View {
     @ObservedRealmObject var message: Message
 
-    @State private var labelWidth: CGFloat = 100
-
     var body: some View {
-        VStack(alignment: .leading, spacing: IKPadding.mini) {
-            RecipientLabel(
-                labelWidth: $labelWidth,
+        Grid(alignment: .leading, horizontalSpacing: IKPadding.mini, verticalSpacing: IKPadding.mini) {
+            RecipientRow(
                 title: MailResourcesStrings.Localizable.fromTitle,
                 recipients: message.from,
                 bimi: message.bimi
             )
-            RecipientLabel(
-                labelWidth: $labelWidth,
-                title: MailResourcesStrings.Localizable.toTitle,
-                recipients: message.to
-            )
+            RecipientRow(title: MailResourcesStrings.Localizable.toTitle, recipients: message.to)
             if !message.cc.isEmpty {
-                RecipientLabel(
-                    labelWidth: $labelWidth,
-                    title: MailResourcesStrings.Localizable.ccTitle,
-                    recipients: message.cc
-                )
+                RecipientRow(title: MailResourcesStrings.Localizable.ccTitle, recipients: message.cc)
             }
             if !message.bcc.isEmpty {
-                RecipientLabel(
-                    labelWidth: $labelWidth,
-                    title: MailResourcesStrings.Localizable.bccTitle,
-                    recipients: message.bcc
-                )
+                RecipientRow(title: MailResourcesStrings.Localizable.bccTitle, recipients: message.bcc)
             }
-            HStack {
+
+            GridRow {
                 MailResourcesAsset.calendar
                     .iconSize(.medium)
                 Text(message.date.formatted(date: .long, time: .shortened))
             }
             .textStyle(.bodySmallSecondary)
         }
         .frame(maxWidth: .infinity, alignment: .leading)
-        .onPreferenceChange(ViewWidthKey.self) {
-            labelWidth = $0
-        }
     }
 }
 
 #Preview {
     MessageHeaderDetailView(message: PreviewHelper.sampleMessage)
 }
-
-struct RecipientLabel: View {
-    @Environment(\.currentUser) private var currentUser
-    @EnvironmentObject private var mailboxManager: MailboxManager
-
-    @Binding var labelWidth: CGFloat
-    let title: String
-    let recipients: RealmSwift.List<Recipient>
-    var bimi: Bimi?
-
-    var body: some View {
-        HStack(alignment: .top) {
-            Text(title)
-                .textStyle(.bodySmallSecondary)
-                .background(ViewGeometry(key: ViewWidthKey.self, property: \.size.width))
-                .frame(width: labelWidth, alignment: .leading)
-            VStack(alignment: .leading, spacing: 4) {
-                ForEach(recipients, id: \.self) { recipient in
-                    FlowLayout(alignment: .leading, horizontalSpacing: IKPadding.micro) {
-                        ContactActionsMenuView(recipient: recipient, bimi: bimi) {
-                            Text(recipient.name.isEmpty ? recipient.email : recipient.name)
-                                .textStyle(.bodySmallAccent)
-                                .lineLimit(1)
-                                .layoutPriority(1)
-                        }
-                        .environmentObject(mailboxManager)
-                        .environment(\.currentUser, currentUser)
-
-                        if !recipient.name.isEmpty {
-                            Text(recipient.email)
-                                .textStyle(.labelSecondary)
-                                .lineLimit(1)
-                        }
-                    }
-                }
-            }
-        }
-        .padding(.bottom, 2)
-    }
-}

Mail/Views/Thread/Message/MessageHeader/RecipientRow.swift

@@ -0,0 +1,64 @@
+/*
+ Infomaniak Mail - iOS App
+ Copyright (C) 2025 Infomaniak Network SA
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import DesignSystem
+import InfomaniakCoreSwiftUI
+import MailCore
+import MailCoreUI
+import RealmSwift
+import SwiftUI
+
+struct RecipientRow: View {
+    @Environment(\.currentUser) private var currentUser
+    @EnvironmentObject private var mailboxManager: MailboxManager
+
+    let title: String
+    let recipients: RealmSwift.List<Recipient>
+    var bimi: Bimi?
+
+    var body: some View {
+        GridRow(alignment: .top) {
+            Text(title)
+                .textStyle(.bodySmallSecondary)
+
+            VStack(alignment: .leading, spacing: 4) {
+                ForEach(recipients, id: \.self) { recipient in
+                    FlowLayout(alignment: .leading, horizontalSpacing: IKPadding.micro) {
+                        ContactActionsMenuView(recipient: recipient, bimi: bimi) {
+                            Text(recipient.name.isEmpty ? recipient.email : recipient.name)
+                                .textStyle(.bodySmallAccent)
+                                .multilineTextAlignment(.leading)
+                                .layoutPriority(1)
+                        }
+                        .environmentObject(mailboxManager)
+                        .environment(\.currentUser, currentUser)
+
+                        if !recipient.name.isEmpty && recipient.name != recipient.email {
+                            Text(recipient.email)
+                                .textStyle(.labelSecondary)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#Preview {
+    RecipientRow(title: "To", recipients: PreviewHelper.sampleMessage.to)
+}