Fixes #388 - Prevent long room names from breaking the room navigation bar layout (#453)

ElementX/Sources/Screens/RoomScreen/RoomScreenModels.swift

@@ -31,7 +31,7 @@ enum RoomScreenComposerMode: Equatable {
 }
 
 enum RoomScreenViewAction {
-    case headerTapped
+    case displayRoomDetails
     case displayEmojiPicker(itemId: String)
     case paginateBackwards
     case itemAppeared(id: String)

ElementX/Sources/Screens/RoomScreen/RoomScreenViewModel.swift

@@ -94,7 +94,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
     // swiftlint:disable:next cyclomatic_complexity
     override func process(viewAction: RoomScreenViewAction) async {
         switch viewAction {
-        case .headerTapped:
+        case .displayRoomDetails:
             callback?(.displayRoomDetails)
         case .paginateBackwards:
             await paginateBackwards()

ElementX/Sources/Screens/RoomScreen/View/RoomHeaderView.swift

@@ -24,16 +24,16 @@ struct RoomHeaderView: View {
     @ObservedObject var context: RoomScreenViewModel.Context
 
     var body: some View {
-        Button {
+        HStack(spacing: 8) {
-            context.send(viewAction: .headerTapped)
+            roomAvatar
-        } label: {
+                .accessibilityHidden(true)
-            HStack(spacing: 8) {
+            Text(context.viewState.roomTitle)
-                roomAvatar
+                .font(.element.headline)
-                    .accessibilityHidden(true)
+                .accessibilityIdentifier("roomNameLabel")
-                Text(context.viewState.roomTitle)
+        }
-                    .font(.element.headline)
+        // Using a button stops is from getting truncated in the navigation bar
-                    .accessibilityIdentifier("roomNameLabel")
+        .onTapGesture {
-            }
+            context.send(viewAction: .displayRoomDetails)
         }
     }
 

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -75,10 +75,21 @@ struct RoomScreen: View {
         }
     }
     
+    @ToolbarContentBuilder
     var toolbar: some ToolbarContent {
-        ToolbarItem(placement: .navigationBarLeading) {
+        // .principal + .primaryAction works better than .navigation leading + trailing
+        // as the latter disables interaction in the action button for rooms with long names
+        ToolbarItem(placement: .principal) {
             RoomHeaderView(context: context)
         }
+        
+        ToolbarItem(id: "RoomDetailsAction", placement: .secondaryAction, showsByDefault: false) {
+            Button {
+                context.send(viewAction: .displayRoomDetails)
+            } label: {
+                Label("Room Details", systemImage: "info.circle")
+            }
+        }
     }
     
     private func sendMessage() {

changelog.d/388.bugfix

@@ -0,0 +1 @@
+Prevent long room names from breaking the room navigation bar layout