Add SwiftLint rule to enforce stack spacing. (#2080)

Xcode 15 changes the default behaviour and given we're always working from designs, we shouldn't rely on it for our layout.

.swiftlint.yml

@@ -49,6 +49,18 @@ nesting:
     warning: 5
 
 custom_rules:
+  vstack_spacing:
+    regex: "(?-s)VStack((?!spacing:).)*\\s*\\{"
+    match_kinds: identifier
+    message: "Please use explicit spacing in VStacks."
+    severity: warning
+
+  hstack_spacing:
+    regex: "(?-s)HStack((?!spacing:).)*\\s*\\{"
+    match_kinds: identifier
+    message: "Please use explicit spacing in HStacks."
+    severity: warning
+
   print_deprecation:
     regex: "\\b(print)\\b"
     match_kinds: identifier

ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -263,7 +263,7 @@
     {
       "identity" : "swiftui-introspect",
       "kind" : "remoteSourceControl",
-      "location" : "https://github.com/siteline/SwiftUI-Introspect.git",
+      "location" : "https://github.com/siteline/SwiftUI-Introspect",
       "state" : {
         "revision" : "b94da693e57eaf79d16464b8b7c90d09cba4e290",
         "version" : "0.9.2"

ElementX/Sources/Other/MapLibre/MapLibreStaticMapView.swift

@@ -86,7 +86,7 @@ struct MapLibreStaticMapView<PinAnnotation: View>: View {
         } label: {
             placeholderImage
                 .overlay {
-                    VStack {
+                    VStack(spacing: 0) {
                         Image(systemName: "arrow.clockwise")
                         Text(L10n.actionStaticMapLoad)
                     }

ElementX/Sources/Other/SwiftUI/Animation/ShimmerModifier.swift

@@ -87,7 +87,7 @@ struct ShimmerOverlay_Previews: PreviewProvider, TestablePreview {
                                                userIndicatorController: ServiceLocator.shared.userIndicatorController)
     
     static var previews: some View {
-        VStack {
+        VStack(spacing: 0) {
             ForEach(0...8, id: \.self) { _ in
                 HomeScreenRoomCell(room: .placeholder(), context: viewModel.context, isSelected: false)
             }

ElementX/Sources/Other/SwiftUI/Form Styles/FormButtonStyles.swift

@@ -97,7 +97,7 @@ struct FormButtonStyle: PrimitiveButtonStyle {
         var accessory: FormRowAccessory?
         
         func makeBody(configuration: Configuration) -> some View {
-            HStack {
+            HStack(spacing: 8) {
                 configuration.label
                     .labelStyle(FormRowLabelStyle(role: configuration.role))
                     .foregroundColor(.compound.textPrimary)
@@ -126,7 +126,7 @@ struct FormActionButtonStyle: ButtonStyle {
     let title: String
     
     func makeBody(configuration: Configuration) -> some View {
-        VStack {
+        VStack(spacing: 8) {
             configuration.label
                 .buttonStyle(.plain)
                 .foregroundColor(.compound.textPrimary)

ElementX/Sources/Other/SwiftUI/Form Styles/FormRowLabelStyle.swift

@@ -61,7 +61,7 @@ struct FormRowLabelStyle: LabelStyle {
 
 struct FormRowLabelStyle_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 12) {
             Label("Person", systemImage: "person")
                 .labelStyle(FormRowLabelStyle())
             

ElementX/Sources/Other/SwiftUI/Layout/FullscreenDialog.swift

@@ -50,7 +50,7 @@ struct FullscreenDialog<Content: View, BottomContent: View>: View {
     var standardLayout: some View {
         GeometryReader { geometry in
             ScrollView {
-                VStack {
+                VStack(spacing: 0) {
                     Spacer()
                         .frame(height: UIConstants.spacerHeight(in: geometry))
                     
@@ -62,7 +62,7 @@ struct FullscreenDialog<Content: View, BottomContent: View>: View {
             }
             .scrollBounceBehavior(.basedOnSize)
             .safeAreaInset(edge: .bottom) {
-                VStack {
+                VStack(spacing: 0) {
                     bottomContent()
                         .readableFrame()
                         .padding(.horizontal, horizontalPadding)
@@ -81,7 +81,7 @@ struct FullscreenDialog<Content: View, BottomContent: View>: View {
     var accessibilityLayout: some View {
         GeometryReader { geometry in
             ScrollView {
-                VStack {
+                VStack(spacing: 0) {
                     Spacer()
                         .frame(height: UIConstants.spacerHeight(in: geometry))
                     

ElementX/Sources/Other/UserIndicator/UserIndicatorModalView.swift

@@ -30,7 +30,7 @@ struct UserIndicatorModalView: View {
                     ProgressView(value: progressFraction)
                 }
 
-                HStack {
+                HStack(spacing: 8) {
                     if let iconName = indicator.iconName {
                         Image(systemName: iconName)
                             .font(.compound.bodyLG)

ElementX/Sources/Other/VoiceMessage/EstimatedWaveformView.swift

@@ -124,7 +124,7 @@ private struct WaveformShape: Shape {
 struct EstimatedWaveformView_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
         // Wrap the WaveformView in a VStack otherwise the preview test will fail (because of Prefire / GeometryReader)
-        VStack {
+        VStack(spacing: 0) {
             EstimatedWaveformView(waveform: EstimatedWaveform.mockWaveform, progress: 0.5)
                 .frame(width: 140, height: 50)
         }

ElementX/Sources/Other/VoiceMessage/VoiceMessageButton.swift

@@ -110,12 +110,12 @@ extension VoiceMessageButton.State {
 
 struct VoiceMessageButton_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
-        VStack {
+        VStack(spacing: 8) {
-            HStack {
+            HStack(spacing: 8) {
                 VoiceMessageButton(state: .paused, size: .small, action: { })
                 VoiceMessageButton(state: .paused, size: .medium, action: { })
             }
-            HStack {
+            HStack(spacing: 8) {
                 VoiceMessageButton(state: .playing, size: .small, action: { })
                 VoiceMessageButton(state: .playing, size: .medium, action: { })
             }

ElementX/Sources/Screens/AppLock/AppLockSetupPINScreen/View/PINTextField.swift

@@ -102,7 +102,7 @@ private struct PINDigitField: View {
 
 struct PINTextField_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
-        VStack {
+        VStack(spacing: 8) {
             PreviewWrapper(pinCode: "", isSecure: false)
             PreviewWrapper(pinCode: "12", isSecure: false)
             PreviewWrapper(pinCode: "1234", isSecure: false)

ElementX/Sources/Screens/ComposerToolbar/View/CompletionSuggestionView.swift

@@ -123,12 +123,12 @@ struct CompletionSuggestion_Previews: PreviewProvider, TestablePreview {
     
     static var previews: some View {
         // Putting them is VStack allows the preview to work properly in tests
-        VStack {
+        VStack(spacing: 8) {
             CompletionSuggestionView(imageProvider: MockMediaProvider(),
                                      items: [.user(item: MentionSuggestionItem(id: "@user_mention_1:matrix.org", displayName: "User 1", avatarURL: nil)),
                                              .user(item: MentionSuggestionItem(id: "@user_mention_2:matrix.org", displayName: "User 2", avatarURL: URL.documentsDirectory))]) { _ in }
         }
-        VStack {
+        VStack(spacing: 8) {
             CompletionSuggestionView(imageProvider: MockMediaProvider(),
                                      items: multipleItems) { _ in }
         }

ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift

@@ -299,7 +299,7 @@ struct ComposerToolbar_Previews: PreviewProvider, TestablePreview {
         ComposerToolbar.mock(focused: true)
         
         // Putting them is VStack allows the completion suggestion preview to work properly in tests
-        VStack {
+        VStack(spacing: 8) {
             // The mock functon can't be used in this context because it does not hold a reference to the view model, losing the combine subscriptions
             ComposerToolbar(context: composerViewModel.context,
                             wysiwygViewModel: wysiwygViewModel,
@@ -307,7 +307,7 @@ struct ComposerToolbar_Previews: PreviewProvider, TestablePreview {
         }
         .previewDisplayName("With Suggestions")
         
-        VStack {
+        VStack(spacing: 8) {
             ComposerToolbar.textWithVoiceMessage(focused: false)
             ComposerToolbar.textWithVoiceMessage(focused: true)
             ComposerToolbar.voiceMessageRecordingMock(recording: true)

ElementX/Sources/Screens/ComposerToolbar/View/MessageComposer.swift

@@ -154,7 +154,7 @@ private struct MessageComposerEditHeader: View {
     let action: () -> Void
     
     var body: some View {
-        HStack(alignment: .center) {
+        HStack(alignment: .center, spacing: 8) {
             Label(L10n.commonEditing,
                   iconAsset: Asset.Images.editing,
                   iconSize: .xSmall,
@@ -227,7 +227,7 @@ struct MessageComposer_Previews: PreviewProvider, TestablePreview {
     }
 
     static var previews: some View {
-        VStack {
+        VStack(spacing: 8) {
             messageComposer(sendingDisabled: true)
 
             messageComposer("Some message",
@@ -240,7 +240,7 @@ struct MessageComposer_Previews: PreviewProvider, TestablePreview {
         .padding(.horizontal)
 
         ScrollView {
-            VStack {
+            VStack(spacing: 8) {
                 ForEach(replyTypes, id: \.self) { replyDetails in
                     messageComposer(mode: .reply(itemID: .random,
                                                  replyDetails: replyDetails, isThread: false))
@@ -252,7 +252,7 @@ struct MessageComposer_Previews: PreviewProvider, TestablePreview {
         .previewDisplayName("Replying")
         
         ScrollView {
-            VStack {
+            VStack(spacing: 8) {
                 ForEach(replyTypes, id: \.self) { replyDetails in
                     messageComposer(mode: .reply(itemID: .random,
                                                  replyDetails: replyDetails, isThread: true))

ElementX/Sources/Screens/ComposerToolbar/View/VoiceMessagePreviewComposer.swift

@@ -41,18 +41,16 @@ struct VoiceMessagePreviewComposer: View {
     }
     
     var body: some View {
-        HStack {
+        HStack(spacing: 8) {
-            HStack {
+            VoiceMessageButton(state: .init(playerState.playerButtonPlaybackState),
-                VoiceMessageButton(state: .init(playerState.playerButtonPlaybackState),
+                               size: .small,
-                                   size: .small,
+                               action: onPlayPause)
-                                   action: onPlayPause)
+            Text(timeLabelContent)
-                Text(timeLabelContent)
+                .lineLimit(1)
-                    .lineLimit(1)
+                .font(.compound.bodySMSemibold)
-                    .font(.compound.bodySMSemibold)
+                .foregroundColor(.compound.textSecondary)
-                    .foregroundColor(.compound.textSecondary)
+                .monospacedDigit()
-                    .monospacedDigit()
+                .fixedSize(horizontal: true, vertical: true)
-                    .fixedSize(horizontal: true, vertical: true)
-            }
 
             waveformView
                 .waveformInteraction(isDragging: $isDragging,
@@ -130,9 +128,7 @@ struct VoiceMessagePreviewComposer_Previews: PreviewProvider, TestablePreview {
     static let waveformData: [Float] = Array(repeating: 1.0, count: 1000)
     
     static var previews: some View {
-        VStack {
+        VoiceMessagePreviewComposer(playerState: playerState, waveform: .data(waveformData), onPlay: { }, onPause: { }, onSeek: { _ in }, onScrubbing: { _ in })
-            VoiceMessagePreviewComposer(playerState: playerState, waveform: .data(waveformData), onPlay: { }, onPause: { }, onSeek: { _ in }, onScrubbing: { _ in })
+            .fixedSize(horizontal: false, vertical: true)
-                .fixedSize(horizontal: false, vertical: true)
-        }
     }
 }

ElementX/Sources/Screens/ComposerToolbar/View/VoiceMessageRecordingButton.swift

@@ -69,7 +69,7 @@ private struct VoiceMessageRecordingButtonStyle: ButtonStyle {
 
 struct VoiceMessageRecordingButton_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
-        HStack {
+        HStack(spacing: 8) {
             VoiceMessageRecordingButton(mode: .idle)
             
             VoiceMessageRecordingButton(mode: .recording)

ElementX/Sources/Screens/ComposerToolbar/View/VoiceMessageRecordingComposer.swift

@@ -45,9 +45,7 @@ struct VoiceMessageRecordingComposer_Previews: PreviewProvider, TestablePreview
     static let recorderState = AudioRecorderState()
     
     static var previews: some View {
-        VStack {
+        VoiceMessageRecordingComposer(recorderState: recorderState)
-            VoiceMessageRecordingComposer(recorderState: recorderState)
+            .fixedSize(horizontal: false, vertical: true)
-                .fixedSize(horizontal: false, vertical: true)
-        }
     }
 }

ElementX/Sources/Screens/ComposerToolbar/View/VoiceMessageRecordingView.swift

@@ -42,7 +42,7 @@ struct VoiceMessageRecordingView: View {
     }
     
     var body: some View {
-        HStack {
+        HStack(spacing: 8) {
             VoiceMessageRecordingBadge()
                 .frame(width: recordingIndicatorSize, height: recordingIndicatorSize)
 

ElementX/Sources/Screens/CreatePollScreen/View/CreatePollScreen.swift

@@ -137,7 +137,7 @@ private struct CreatePollOptionView: View {
     let deleteAction: () -> Void
 
     var body: some View {
-        HStack {
+        HStack(spacing: 8) {
             if editMode?.wrappedValue == .active {
                 Button(role: .destructive, action: deleteAction) {
                     CompoundIcon(\.delete)

ElementX/Sources/Screens/EmojiPickerScreen/View/EmojiPickerScreenHeaderView.swift

@@ -20,19 +20,15 @@ struct EmojiPickerScreenHeaderView: View {
     let title: String
     
     var body: some View {
-        HStack {
+        Text(title)
-            Text(title)
+            .font(.compound.bodyMD.bold())
-                .font(.compound.bodyMD.bold())
+            .foregroundColor(.compound.textPrimary)
-                .foregroundColor(.compound.textPrimary)
+            .frame(maxWidth: .infinity, alignment: .leading)
-                .frame(maxWidth: .infinity, alignment: .leading)
-        }
     }
 }
 
 struct EmojiPickerScreenHeaderView_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
-        Group {
+        EmojiPickerScreenHeaderView(title: "Title")
-            EmojiPickerScreenHeaderView(title: "Title")
-        }
     }
 }

ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift

@@ -103,7 +103,7 @@ struct HomeScreenRoomCell: View {
     
     @ViewBuilder
     private var footer: some View {
-        HStack(alignment: .firstTextBaseline) {
+        HStack(alignment: .firstTextBaseline, spacing: 0) {
             ZStack(alignment: .topLeading) {
                 // Hidden text with 2 lines to maintain consistent height, scaling with dynamic text.
                 Text(" \n ")

ElementX/Sources/Screens/InvitesScreen/View/InvitesScreenCell.swift

@@ -70,7 +70,7 @@ struct InvitesScreenCell: View {
     @ViewBuilder
     private var inviterView: some View {
         if let invitedText = attributedInviteText, let name = invite.roomDetails.inviter?.displayName {
-            HStack(alignment: .firstTextBaseline) {
+            HStack(alignment: .firstTextBaseline, spacing: 8) {
                 LoadableAvatarImage(url: invite.roomDetails.inviter?.avatarURL,
                                     name: name,
                                     contentID: name,
@@ -85,7 +85,7 @@ struct InvitesScreenCell: View {
     
     @ViewBuilder
     private var textualContent: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 0) {
             Text(title)
                 .font(.compound.bodyLGSemibold)
                 .foregroundColor(.compound.textPrimary)

ElementX/Sources/Screens/OnboardingScreen/View/OnboardingScreen.swift

@@ -24,7 +24,7 @@ struct OnboardingScreen: View {
     
     var body: some View {
         GeometryReader { geometry in
-            VStack(alignment: .leading) {
+            VStack(alignment: .leading, spacing: 0) {
                 Spacer()
                     .frame(height: UIConstants.spacerHeight(in: geometry))
                 
@@ -36,6 +36,7 @@ struct OnboardingScreen: View {
                     .frame(width: geometry.size.width)
                     .padding(.bottom, UIConstants.actionButtonBottomPadding)
                     .padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16)
+                    .padding(.top, 8)
                 
                 Spacer()
                     .frame(height: UIConstants.spacerHeight(in: geometry))
@@ -49,7 +50,7 @@ struct OnboardingScreen: View {
     }
     
     var content: some View {
-        VStack {
+        VStack(spacing: 0) {
             Spacer()
             
             if verticalSizeClass == .regular {

ElementX/Sources/Screens/RoomMemberListScreen/View/RoomMembersListScreen.swift

@@ -24,7 +24,7 @@ struct RoomMembersListScreen: View {
     
     var body: some View {
         ScrollView {
-            LazyVStack(alignment: .leading) {
+            LazyVStack(alignment: .leading, spacing: 12) {
                 membersSection(data: context.viewState.visibleInvitedMembers, sectionTitle: L10n.screenRoomMemberListPendingHeaderTitle)
                 membersSection(data: context.viewState.visibleJoinedMembers, sectionTitle: L10n.screenRoomMemberListHeaderTitle(Int(context.viewState.joinedMembersCount)))
             }
@@ -54,7 +54,7 @@ struct RoomMembersListScreen: View {
                 Text(sectionTitle)
                     .foregroundColor(.compound.textSecondary)
                     .font(.compound.bodyLG)
-                    .padding(.vertical, 12)
+                    .padding(.top, 12)
             }
         }
         .padding(.horizontal)

ElementX/Sources/Screens/RoomMemberListScreen/View/RoomMembersListScreenMemberCell.swift

@@ -24,7 +24,7 @@ struct RoomMembersListScreenMemberCell: View {
         Button {
             context.send(viewAction: .selectMember(id: member.id))
         } label: {
-            HStack {
+            HStack(spacing: 8) {
                 LoadableAvatarImage(url: member.avatarURL,
                                     name: member.name ?? "",
                                     contentID: member.id,
@@ -36,26 +36,24 @@ struct RoomMembersListScreenMemberCell: View {
                     .font(.compound.bodyMDSemibold)
                     .foregroundColor(.compound.textPrimary)
                     .lineLimit(1)
-
-                Spacer()
             }
+            .frame(maxWidth: .infinity, alignment: .leading)
             .accessibilityElement(children: .combine)
         }
     }
 }
 
 struct RoomMembersListMemberCell_Previews: PreviewProvider, TestablePreview {
+    static let members: [RoomMemberProxyMock] = [
+        .mockAlice,
+        .mockBob,
+        .mockCharlie
+    ]
+    static let viewModel = RoomMembersListScreenViewModel(roomProxy: RoomProxyMock(with: .init(displayName: "Some room", members: members)),
+                                                          mediaProvider: MockMediaProvider(),
+                                                          userIndicatorController: ServiceLocator.shared.userIndicatorController)
     static var previews: some View {
-        let members: [RoomMemberProxyMock] = [
+        VStack(spacing: 12) {
-            .mockAlice,
-            .mockBob,
-            .mockCharlie
-        ]
-        let viewModel = RoomMembersListScreenViewModel(roomProxy: RoomProxyMock(with: .init(displayName: "Some room", members: members)),
-                                                       mediaProvider: MockMediaProvider(),
-                                                       userIndicatorController: ServiceLocator.shared.userIndicatorController)
-        
-        return VStack {
             ForEach(members, id: \.userID) { member in
                 RoomMembersListScreenMemberCell(member: .init(withProxy: member), context: viewModel.context)
             }

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

@@ -72,7 +72,7 @@ struct LongPressWithFeedback_Previews: PreviewProvider, TestablePreview {
         var body: some View {
             NavigationStack {
                 ScrollView {
-                    VStack(alignment: .leading) {
+                    VStack(alignment: .leading, spacing: 8) {
                         mockBubble("This is a message from somebody with a couple of lines of text.")
                             .longPressWithFeedback { isPresentingSheet = true }
                         

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

@@ -33,7 +33,7 @@ private struct TimelineItemAccessibilityModifier: ViewModifier {
         case let timelineItem as EventBasedTimelineItemProtocol:
             content
                 .accessibilityRepresentation {
-                    VStack {
+                    VStack(spacing: 8) {
                         Text(timelineItem.sender.displayName ?? timelineItem.sender.id)
                         content
                     }

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

@@ -49,7 +49,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                 }
 
                 VStack(alignment: alignment, spacing: 0) {
-                    HStack {
+                    HStack(spacing: 0) {
                         if timelineItem.isOutgoing {
                             Spacer()
                         }
@@ -520,7 +520,7 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider, TestablePreview
     }
 
     static var replies: some View {
-        VStack {
+        VStack(spacing: 0) {
             RoomTimelineItemView(viewState: .init(item: TextRoomTimelineItem(id: .init(timelineID: ""),
                                                                              timestamp: "10:42",
                                                                              isOutgoing: true,

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

@@ -27,16 +27,12 @@ struct TimelineItemPlainStylerView<Content: View>: View {
     @State private var showItemActionMenu = false
 
     var body: some View {
-        VStack(alignment: .trailing) {
+        VStack(alignment: .trailing, spacing: 0) {
             VStack(alignment: .leading, spacing: 4) {
                 header
 
                 VStack(alignment: .leading, spacing: 4) {
-                    HStack(alignment: .firstTextBaseline) {
+                    contentWithReply
-                        contentWithReply
-
-                        Spacer()
-                    }
                     supplementaryViews
                 }
             }
@@ -47,7 +43,7 @@ struct TimelineItemPlainStylerView<Content: View>: View {
     
     @ViewBuilder
     var contentWithReply: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 8) {
             if let messageTimelineItem = timelineItem as? EventBasedMessageTimelineItemProtocol {
                 if messageTimelineItem.isThreaded {
                     ThreadDecorator()
@@ -98,8 +94,8 @@ struct TimelineItemPlainStylerView<Content: View>: View {
     @ViewBuilder
     private var header: some View {
         if shouldShowSenderDetails {
-            HStack {
+            HStack(spacing: 8) {
-                HStack {
+                HStack(spacing: 8) {
                     TimelineSenderAvatarView(timelineItem: timelineItem)
                     Text(timelineItem.sender.displayName ?? timelineItem.sender.id)
                         .font(.subheadline)
@@ -123,7 +119,7 @@ struct TimelineItemPlainStylerView<Content: View>: View {
     
     @ViewBuilder
     private var supplementaryViews: some View {
-        VStack {
+        VStack(spacing: 4) {
             if timelineItem.properties.isEdited {
                 Text(L10n.commonEditedSuffix)
                     .font(.compound.bodySM)
@@ -251,8 +247,9 @@ struct TimelineItemPlainStylerView_Previews: PreviewProvider, TestablePreview {
             }
         }
         .environment(\.timelineStyle, .plain)
-        .previewLayout(.sizeThatFits)
         .environmentObject(viewModel.context)
+        .previewLayout(.sizeThatFits)
+        
         threads
             .padding()
             .environment(\.timelineStyle, .plain)

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

@@ -145,7 +145,7 @@ struct TimelineItemStyler_Previews: PreviewProvider, TestablePreview {
                                                                  content: .init(body: "באמת‏! -- house!"))
 
     static var testView: some View {
-        VStack {
+        VStack(spacing: 0) {
             TextRoomTimelineView(timelineItem: base)
             TextRoomTimelineView(timelineItem: sentNonLast)
             TextRoomTimelineView(timelineItem: sentLast)
@@ -156,7 +156,7 @@ struct TimelineItemStyler_Previews: PreviewProvider, TestablePreview {
     }
 
     static var languagesTestView: some View {
-        VStack {
+        VStack(spacing: 0) {
             TextRoomTimelineView(timelineItem: ltrString)
             TextRoomTimelineView(timelineItem: rtlString)
             TextRoomTimelineView(timelineItem: ltrStringThatContainsRtl)

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

@@ -67,7 +67,7 @@ struct ReactionsSummaryView: View {
         TabView(selection: $selectedReactionKey) {
             ForEach(reactions, id: \.self) { reaction in
                 ScrollView {
-                    VStack(alignment: .leading) {
+                    VStack(alignment: .leading, spacing: 8) {
                         ForEach(reaction.senders, id: \.self) { sender in
                             ReactionSummarySenderView(sender: sender, member: members[sender.senderID], imageProvider: imageProvider)
                                 .padding(.horizontal, 16)
@@ -122,15 +122,15 @@ private struct ReactionSummarySenderView: View {
     }
     
     var body: some View {
-        HStack {
+        HStack(spacing: 8) {
             LoadableAvatarImage(url: member?.avatarURL,
                                 name: displayName,
                                 contentID: sender.senderID,
                                 avatarSize: .user(on: .timeline),
                                 imageProvider: imageProvider)
             
-            VStack(alignment: .leading) {
+            VStack(alignment: .leading, spacing: 0) {
-                HStack {
+                HStack(spacing: 8) {
                     Text(displayName)
                         .font(.compound.bodyMDSemibold)
                         .frame(maxWidth: .infinity, alignment: .leading)

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

@@ -42,7 +42,7 @@ struct TimelineDeliveryStatusView: View {
 
 struct TimelineDeliveryStatusView_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
-        VStack {
+        VStack(spacing: 8) {
             TimelineDeliveryStatusView(deliveryStatus: .sending)
             TimelineDeliveryStatusView(deliveryStatus: .sent)
         }

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

@@ -205,7 +205,7 @@ struct TimelineReactionAddMoreButtonLabel: View {
 
 struct TimelineReactionViewPreviewsContainer: View {
     var body: some View {
-        VStack {
+        VStack(spacing: 8) {
             TimelineReactionsView(context: RoomScreenViewModel.mock.context,
                                   itemID: .init(timelineID: "1"),
                                   reactions: [AggregatedReaction.mockReactionWithLongText,

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

@@ -92,7 +92,7 @@ struct TimelineReadReceiptsView_Previews: PreviewProvider, TestablePreview {
     }
 
     static var previews: some View {
-        VStack {
+        VStack(spacing: 8) {
             TimelineReadReceiptsView(timelineItem: mockTimelineItem(with: singleReceipt))
                 .environmentObject(viewModel.context)
             TimelineReadReceiptsView(timelineItem: mockTimelineItem(with: doubleReceipt))

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

@@ -119,7 +119,7 @@ struct SwipeRightAction_Previews: PreviewProvider, TestablePreview {
         var body: some View {
             NavigationStack {
                 ScrollView {
-                    VStack(alignment: .leading) {
+                    VStack(alignment: .leading, spacing: 2) {
                         mockBubble("This is a message from somebody with a couple of lines of text.")
                             .swipeRightAction {
                                 Image(systemName: "flame")

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

@@ -22,7 +22,7 @@ struct AudioRoomTimelineView: View {
 
     var body: some View {
         TimelineStyler(timelineItem: timelineItem) {
-            HStack {
+            HStack(spacing: 8) {
                 Image(systemName: "waveform")
                     .foregroundColor(.compound.iconPrimary)
                 FormattedBodyText(text: timelineItem.content.body)

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

@@ -34,7 +34,7 @@ struct CollapsibleRoomTimelineView: View {
                     isExpanded.toggle()
                 }
             } label: {
-                HStack(alignment: .center) {
+                HStack(alignment: .center, spacing: 8) {
                     Text(L10n.roomTimelineStateChanges(timelineItem.items.count))
                     Text(Image(systemName: "chevron.forward"))
                         .rotationEffect(.degrees(isExpanded ? 90 : 0))

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

@@ -60,7 +60,7 @@ private struct EncryptedHistoryLabelStyle: LabelStyle {
 
 struct EncryptedHistoryRoomTimelineView_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
-        VStack {
+        VStack(spacing: 8) {
             EncryptedHistoryRoomTimelineView(timelineItem: .init(id: .random, isSessionVerified: true))
             EncryptedHistoryRoomTimelineView(timelineItem: .init(id: .random, isSessionVerified: false))
         }

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

@@ -22,7 +22,7 @@ struct FileRoomTimelineView: View {
     
     var body: some View {
         TimelineStyler(timelineItem: timelineItem) {
-            HStack {
+            HStack(spacing: 8) {
                 Image(systemName: "doc.text.fill")
                     .foregroundColor(.compound.iconPrimary)
                 FormattedBodyText(text: timelineItem.content.body)

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

@@ -87,7 +87,7 @@ struct LocationRoomTimelineView_Previews: PreviewProvider, TestablePreview {
 
     static var previews: some View {
         ScrollView {
-            VStack {
+            VStack(spacing: 8) {
                 states
                     .padding(.horizontal)
             }
@@ -96,7 +96,7 @@ struct LocationRoomTimelineView_Previews: PreviewProvider, TestablePreview {
         .previewDisplayName("Bubbles")
         
         ScrollView {
-            VStack {
+            VStack(spacing: 0) {
                 states
                     .padding(.horizontal)
             }

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

@@ -26,7 +26,7 @@ struct PollOptionView: View {
             FormRowAccessory(kind: .multipleSelection(isSelected: pollOption.isSelected))
 
             VStack(spacing: 10) {
-                HStack(alignment: .lastTextBaseline) {
+                HStack(alignment: .lastTextBaseline, spacing: 8) {
                     Text(pollOption.text)
                         .font(isFinalWinningOption ? .compound.bodyLGSemibold : .compound.bodyLG)
                         .multilineTextAlignment(.leading)
@@ -82,7 +82,7 @@ private struct PollProgressView: View {
 
 struct PollOptionView_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
-        VStack {
+        VStack(spacing: 8) {
             Group {
                 PollOptionView(pollOption: .init(id: "1",
                                                  text: "Italian 🇮🇹",

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

@@ -22,7 +22,7 @@ struct UnsupportedRoomTimelineView: View {
     var body: some View {
         TimelineStyler(timelineItem: timelineItem) {
             Label {
-                VStack(alignment: .leading) {
+                VStack(alignment: .leading, spacing: 0) {
                     Text("\(timelineItem.body): \(timelineItem.eventType)")
                         .fixedSize(horizontal: false, vertical: true)
                     

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

@@ -24,7 +24,7 @@ struct TimelineItemDebugView: View {
     var body: some View {
         NavigationStack {
             ScrollView {
-                VStack {
+                VStack(spacing: 8) {
                     TimelineItemInfoDisclosureGroup(title: "Model", text: info.model, isInitiallyExpanded: true)
                     
                     if let originalJSONInfo = info.originalJSON {
@@ -83,10 +83,9 @@ struct TimelineItemDebugView: View {
         
         @ViewBuilder
         var disclosureGroupContent: some View {
-            VStack(alignment: .leading) {
+            VStack(alignment: .leading, spacing: 0) {
-                Spacer()
-                
                 Divider()
+                    .padding(.vertical, 8)
                 
                 Text(text)
                     .font(.compound.bodyXS.monospaced())

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

@@ -142,7 +142,7 @@ public struct TimelineItemMenu: View {
     private let feedbackGenerator = UIImpactFeedbackGenerator(style: .heavy)
     
     public var body: some View {
-        VStack {
+        VStack(spacing: 8) {
             header
                 .frame(idealWidth: 300.0)
             
@@ -187,7 +187,7 @@ public struct TimelineItemMenu: View {
             
             Spacer(minLength: 8.0)
             
-            VStack(alignment: .leading) {
+            VStack(alignment: .leading, spacing: 0) {
                 Text(item.sender.displayName ?? item.sender.id)
                     .font(.compound.bodySMSemibold)
                     .foregroundColor(.compound.textPrimary)
@@ -211,7 +211,7 @@ public struct TimelineItemMenu: View {
     }
     
     private var reactionsSection: some View {
-        HStack(alignment: .center) {
+        HStack(alignment: .center, spacing: 8) {
             reactionButton(for: "👍️")
             reactionButton(for: "👎️")
             reactionButton(for: "🔥")
@@ -286,12 +286,10 @@ struct TimelineItemMenu_Previews: PreviewProvider, TestablePreview {
     static let viewModel = RoomScreenViewModel.mock
 
     static var previews: some View {
-        VStack {
+        if let item = RoomTimelineItemFixtures.singleMessageChunk.first as? EventBasedTimelineItemProtocol,
-            if let item = RoomTimelineItemFixtures.singleMessageChunk.first as? EventBasedTimelineItemProtocol,
+           let actions = TimelineItemMenuActions(actions: [.copy, .edit, .reply(isThread: false), .redact], debugActions: [.viewSource]) {
-               let actions = TimelineItemMenuActions(actions: [.copy, .edit, .reply(isThread: false), .redact], debugActions: [.viewSource]) {
+            TimelineItemMenu(item: item, actions: actions)
-                TimelineItemMenu(item: item, actions: actions)
+                .environmentObject(viewModel.context)
-            }
         }
-        .environmentObject(viewModel.context)
     }
 }

ElementX/Sources/Screens/SecureBackup/SecureBackupKeyBackupScreen/View/SecureBackupKeyBackupScreen.swift

@@ -52,7 +52,7 @@ struct SecureBackupKeyBackupScreen: View {
                 .font(.compound.bodyMD)
                 .multilineTextAlignment(.center)
             
-            VStack(alignment: .leading) {
+            VStack(alignment: .leading, spacing: 10) {
                 Label {
                     Text(L10n.screenKeyBackupDisableDescriptionPoint1)
                         .foregroundColor(.compound.textSecondary)

ElementX/Sources/Screens/SecureBackup/SecureBackupRecoveryKeyScreen/View/SecureBackupRecoveryKeyScreen.swift

@@ -121,19 +121,19 @@ struct SecureBackupRecoveryKeyScreen: View {
     }
     
     private var generateRecoveryKeySection: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 8) {
             Text(L10n.commonRecoveryKey)
                 .foregroundColor(.compound.textPrimary)
                 .font(.compound.bodySM)
-         
+            
-            HStack {
+            Group {
                 if context.viewState.recoveryKey == nil {
                     Button(generateButtonTitle) {
                         context.send(viewAction: .generateKey)
                     }
                     .font(.compound.bodyLGSemibold)
                 } else {
-                    HStack(alignment: .top) {
+                    HStack(alignment: .top, spacing: 8) {
                         Text(context.viewState.recoveryKey ?? "")
                             .foregroundColor(.compound.textPrimary)
                             .font(.compound.bodyLG)
@@ -155,15 +155,16 @@ struct SecureBackupRecoveryKeyScreen: View {
             .background(Color.compound.bgSubtleSecondaryLevel0)
             .clipShape(RoundedRectangle(cornerRadius: 8))
             
-            HStack(alignment: .top) {
+            Label {
-                if context.viewState.recoveryKey == nil {
-                    CompoundIcon(\.infoSolid, size: .small, relativeTo: .compound.bodySM)
-                }
-                
                 Text(context.viewState.recoveryKeySubtitle)
                     .foregroundColor(.compound.textSecondary)
                     .font(.compound.bodySM)
+            } icon: {
+                if context.viewState.recoveryKey == nil {
+                    CompoundIcon(\.infoSolid, size: .small, relativeTo: .compound.bodySM)
+                }
             }
+            .labelStyle(.custom(spacing: 8, alignment: .top))
         }
     }
     
@@ -173,7 +174,7 @@ struct SecureBackupRecoveryKeyScreen: View {
     
     @ViewBuilder
     private var confirmRecoveryKeySection: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 8) {
             Text(L10n.commonRecoveryKey)
                 .foregroundColor(.compound.textPrimary)
                 .font(.compound.bodySM)

ElementX/Sources/Screens/Settings/SettingsScreen/View/SettingsScreen.swift

@@ -196,7 +196,7 @@ struct SettingsScreen: View {
                     })
                     .accessibilityIdentifier(A11yIdentifiers.settingsScreen.logout)
         } footer: {
-            VStack {
+            VStack(spacing: 0) {
                 versionText
                     .frame(maxWidth: .infinity)
                 

ElementX/Sources/Services/Timeline/TimelineItems/Items/Messages/VoiceMessages/VoiceMessageRoomPlaybackView.swift

@@ -41,18 +41,16 @@ struct VoiceMessageRoomPlaybackView: View {
     }
     
     var body: some View {
-        HStack {
+        HStack(spacing: 8) {
-            HStack {
+            VoiceMessageButton(state: .init(playerState.playerButtonPlaybackState),
-                VoiceMessageButton(state: .init(playerState.playerButtonPlaybackState),
+                               size: .medium,
-                                   size: .medium,
+                               action: onPlayPause)
-                                   action: onPlayPause)
+            Text(timeLabelContent)
-                Text(timeLabelContent)
+                .lineLimit(1)
-                    .lineLimit(1)
+                .font(.compound.bodySMSemibold)
-                    .font(.compound.bodySMSemibold)
+                .foregroundColor(.compound.textSecondary)
-                    .foregroundColor(.compound.textSecondary)
+                .monospacedDigit()
-                    .monospacedDigit()
+                .fixedSize(horizontal: true, vertical: true)
-                    .fixedSize(horizontal: true, vertical: true)
-            }
 
             waveformView
                 .waveformInteraction(isDragging: $isDragging,

UITests/Sources/CreatePollScreenUITests.swift

@@ -58,7 +58,8 @@ class CreatePollScreenUITests: XCTestCase {
         if app.keyboards.count > 0 {
             app.typeText("\n")
         }
-        app.swipeUp()
+        app.swipeUp() // Dismisses the keyboard.
+        app.swipeUp() // Ensures that the bottom is shown.
         
         XCTAssertFalse(addOption.exists)
         XCTAssertFalse(createButton.isEnabled)