Merge branch 'ios-1323-scroll-all-the-connection-details'

2 files changed, 44 insertions, 60 deletions

diff --git a/ios/MullvadVPN/View controllers/Tunnel/ConnectionView/ConnectionView.swift b/ios/MullvadVPN/View controllers/Tunnel/ConnectionView/ConnectionView.swift
index 8611aedd78..939ee05ed4 100644
--- a/ios/MullvadVPN/View controllers/Tunnel/ConnectionView/ConnectionView.swift
+++ b/ios/MullvadVPN/View controllers/Tunnel/ConnectionView/ConnectionView.swift
@@ -25,39 +25,60 @@ struct ConnectionView: View {
             VStack(spacing: 16) {
                 VStack(alignment: .leading, spacing: 0) {
                     HeaderView(viewModel: connectionViewModel, isExpanded: $isExpanded)
-                        .padding(.bottom, 8)
+                        .padding(.bottom, 4)
+
                     Divider()
                         .background(UIColor.secondaryTextColor.color)
-                        .padding(.bottom, 16)
+                        .padding(.top, 4)
+                        .padding(.bottom, 8)
                         .showIf(isExpanded)
 
                     ScrollView {
-                        HStack {
-                            VStack(alignment: .leading, spacing: 0) {
-                                Text(LocalizedStringKey("Active features"))
-                                    .font(.footnote.weight(.semibold))
+                        VStack(alignment: .leading, spacing: 2) {
+                            if let titleForCountryAndCity = connectionViewModel.titleForCountryAndCity {
+                                Text(titleForCountryAndCity)
+                                    .lineLimit(isExpanded ? 2 : 1)
+                                    .font(.title3.weight(.semibold))
+                                    .foregroundStyle(UIColor.primaryTextColor.color)
+                            }
+                            if let titleForServer = connectionViewModel.titleForServer {
+                                Text(titleForServer)
+                                    .lineLimit(isExpanded ? 3 : 1)
+                                    .font(.body)
                                     .foregroundStyle(UIColor.primaryTextColor.color.opacity(0.6))
-                                    .showIf(isExpanded && hasFeatureIndicators)
+                                    .accessibilityIdentifier(
+                                        AccessibilityIdentifier.connectionPanelServerLabel.asString
+                                    )
+                                    .multilineTextAlignment(.leading)
+                                    .fixedSize(horizontal: false, vertical: true)
+                            }
+                            HStack {
+                                VStack(alignment: .leading, spacing: 0) {
+                                    Text(LocalizedStringKey("Active features"))
+                                        .font(.footnote.weight(.semibold))
+                                        .foregroundStyle(UIColor.primaryTextColor.color.opacity(0.6))
+                                        .showIf(isExpanded && hasFeatureIndicators)
 
-                                ChipContainerView(
-                                    viewModel: indicatorsViewModel,
-                                    tunnelState: connectionViewModel.tunnelStatus.state,
-                                    isExpanded: $isExpanded
-                                )
-                                .padding(.bottom, isExpanded ? 16 : 0)
-                                .showIf(hasFeatureIndicators)
+                                    ChipContainerView(
+                                        viewModel: indicatorsViewModel,
+                                        tunnelState: connectionViewModel.tunnelStatus.state,
+                                        isExpanded: $isExpanded
+                                    )
+                                    .padding(.bottom, isExpanded ? 16 : 0)
+                                    .showIf(hasFeatureIndicators)
 
-                                DetailsView(viewModel: connectionViewModel)
-                                    .padding(.bottom, 8)
-                                    .showIf(isExpanded)
+                                    DetailsView(viewModel: connectionViewModel)
+                                        .padding(.bottom, 8)
+                                        .showIf(isExpanded)
+                                }
+                                Spacer()
                             }
-                            Spacer()
-                        }
-                        .sizeOfView { size in
-                            withAnimation {
-                                scrollViewHeight = size.height
+                        }.frame(maxWidth: .infinity, alignment: .leading)
+                            .sizeOfView { size in
+                                withAnimation {
+                                    scrollViewHeight = size.height
+                                }
                             }
-                        }
                     }
                     .frame(maxHeight: scrollViewHeight)
                     .apply {
diff --git a/ios/MullvadVPN/View controllers/Tunnel/ConnectionView/HeaderView.swift b/ios/MullvadVPN/View controllers/Tunnel/ConnectionView/HeaderView.swift
index 7297c5a215..e985474b4d 100644
--- a/ios/MullvadVPN/View controllers/Tunnel/ConnectionView/HeaderView.swift
+++ b/ios/MullvadVPN/View controllers/Tunnel/ConnectionView/HeaderView.swift
@@ -13,9 +13,6 @@ extension ConnectionView {
         @ObservedObject var viewModel: ConnectionViewViewModel
         @Binding var isExpanded: Bool
 
-        @State var titleForCountryAndCity: LocalizedStringKey?
-        @State var titleForServer: LocalizedStringKey?
-
         var body: some View {
             Button {
                 withAnimation {
@@ -46,41 +43,7 @@ extension ConnectionView {
                         }
                         .showIf(viewModel.showsConnectionDetails)
                     }
-                    if let titleForCountryAndCity {
-                        Text(titleForCountryAndCity)
-                            .font(.title3.weight(.semibold))
-                            .foregroundStyle(UIColor.primaryTextColor.color)
-                            .padding(.top, 4)
-                    }
-                    if let titleForServer {
-                        Text(titleForServer)
-                            .font(.body)
-                            .foregroundStyle(UIColor.primaryTextColor.color.opacity(0.6))
-                            .padding(.top, 2)
-                            .accessibilityIdentifier(AccessibilityIdentifier.connectionPanelServerLabel.asString)
-                            .multilineTextAlignment(.leading)
-                            .fixedSize(horizontal: false, vertical: true)
-                    }
                 }
-                .onAppear {
-                    titleForServer = viewModel.titleForServer
-                    titleForCountryAndCity = viewModel.titleForCountryAndCity
-                }
-                .onChange(
-                    of: viewModel.titleForCountryAndCity,
-                    perform: { newValue in
-                        withAnimation {
-                            titleForCountryAndCity = newValue
-                        }
-                    }
-                )
-                .onChange(
-                    of: viewModel.titleForServer,
-                    perform: { newValue in
-                        withAnimation {
-                            titleForServer = newValue
-                        }
-                    })
             }
             .disabled(!viewModel.showsConnectionDetails)
         }