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

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

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