From b60b72452f3c572f658352724acdb16cdd3e191a Mon Sep 17 00:00:00 2001
From: Mauro <34335419+Velin92@users.noreply.github.com>
Date: Thu, 30 Nov 2023 18:47:44 +0100
Subject: [PATCH] Fix scrambled screen when searchinfg (#2191)

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>
---
 .../View/InviteUsersScreen.swift              | 44 +++++++++----------
 .../View/MessageForwardingScreen.swift        | 20 ++++++---
 .../View/StartChatScreen.swift                |  1 +
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreen.swift b/ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreen.swift
index bb7011a56..5ab309691 100644
--- a/ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreen.swift
+++ b/ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreen.swift
@@ -33,33 +33,35 @@ struct InviteUsersScreen: View {
             .searchableConfiguration(hidesNavigationBar: false)
             .compoundSearchField()
             .alert(item: $context.alertInfo)
-            .readFrame($frame)
     }
     
     // MARK: - Private
     
     private var mainContent: some View {
-        Form {
-            // this is a fix for having the carousel not clipped, and inside the form, so when the search is dismissed, it wont break the design
-            Section {
-                EmptyView()
-            } header: {
-                VStack(spacing: 8) {
-                    selectedUsersSection
-                        .textCase(.none)
-                    
-                    if context.viewState.isSearching {
-                        ProgressView()
-                            .frame(maxWidth: .infinity, alignment: .center)
-                            .listRowBackground(Color.clear)
+        GeometryReader { proxy in
+            Form {
+                // this is a fix for having the carousel not clipped, and inside the form, so when the search is dismissed, it wont break the design
+                Section {
+                    EmptyView()
+                } header: {
+                    VStack(spacing: 8) {
+                        selectedUsersSection
+                            .textCase(.none)
+                            .frame(width: proxy.size.width)
+                        
+                        if context.viewState.isSearching {
+                            ProgressView()
+                                .frame(maxWidth: .infinity, alignment: .center)
+                                .listRowBackground(Color.clear)
+                        }
                     }
                 }
-            }
-            
-            if context.viewState.hasEmptySearchResults {
-                noResultsContent
-            } else {
-                usersSection
+                
+                if context.viewState.hasEmptySearchResults {
+                    noResultsContent
+                } else {
+                    usersSection
+                }
             }
         }
     }
@@ -97,7 +99,6 @@ struct InviteUsersScreen: View {
         }
     }
     
-    @State private var frame: CGRect = .zero
     @ScaledMetric private var cellWidth: CGFloat = 72
 
     private var selectedUsersSection: some View {
@@ -120,7 +121,6 @@ struct InviteUsersScreen: View {
                 .padding(.horizontal, 14)
             }
         }
-        .frame(width: frame.width)
     }
     
     @ToolbarContentBuilder
diff --git a/ElementX/Sources/Screens/MessageForwardingScreen/View/MessageForwardingScreen.swift b/ElementX/Sources/Screens/MessageForwardingScreen/View/MessageForwardingScreen.swift
index 0561f6091..9b44044eb 100644
--- a/ElementX/Sources/Screens/MessageForwardingScreen/View/MessageForwardingScreen.swift
+++ b/ElementX/Sources/Screens/MessageForwardingScreen/View/MessageForwardingScreen.swift
@@ -28,13 +28,15 @@ struct MessageForwardingScreen: View {
                 }
                 // Replace these with ScrollView's `scrollPosition` when dropping iOS 16.
             } header: {
-                Rectangle().hidden().onAppear {
-                    context.send(viewAction: .reachedTop)
-                }
+                emptyRectangle
+                    .onAppear {
+                        context.send(viewAction: .reachedTop)
+                    }
             } footer: {
-                Rectangle().hidden().onAppear {
-                    context.send(viewAction: .reachedBottom)
-                }
+                emptyRectangle
+                    .onAppear {
+                        context.send(viewAction: .reachedBottom)
+                    }
             }
             .compoundFormSection()
         }
@@ -59,6 +61,12 @@ struct MessageForwardingScreen: View {
         .compoundSearchField()
         .disableAutocorrection(true)
     }
+    
+    /// The greedy size of Rectangle can create an issue with the navigation bar when the search is highlighted, so is best to use a fixed frame instead of hidden() or EmptyView()
+    private var emptyRectangle: some View {
+        Rectangle()
+            .frame(width: 0, height: 0)
+    }
 }
 
 private struct MessageForwardingRoomCell: View {
diff --git a/ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift b/ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift
index cb0d5abdd..9558e80dc 100644
--- a/ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift
+++ b/ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift
@@ -37,6 +37,7 @@ struct StartChatScreen: View {
         .disableInteractiveDismissOnSearch()
         .dismissSearchOnDisappear()
         .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always), prompt: L10n.commonSearchForSomeone)
+        .searchableConfiguration(hidesNavigationBar: false)
         .compoundSearchField()
         .alert(item: $context.alertInfo)
     }