Fix favorites grid layout issues on New Tab Page

DuckDuckGo/EditableShortcutsView.swift

@@ -28,7 +28,7 @@ struct EditableShortcutsView: View {
     private let haptics = UIImpactFeedbackGenerator()
 
     var body: some View {
-        NewTabPageGridView(geometry: geometry) { _ in
+        NewTabPageGridView(geometry: geometry, isUsingDynamicSpacing: true) { _ in
             ReorderableForEach(model.itemsSettings, id: \.item.id, isReorderingEnabled: true) { setting in
                 let isEnabled = model.enabledItems.contains(setting.item)
                 Button {

DuckDuckGo/FavoritesView.swift

@@ -36,10 +36,12 @@ struct FavoritesView<Model: FavoritesViewModel>: View {
     var body: some View {
         VStack(alignment: .center, spacing: 24) {
 
-            let columns = NewTabPageGrid.columnsCount(for: horizontalSizeClass, isLandscape: isLandscape)
+            let columns = NewTabPageGrid.columnsCount(for: horizontalSizeClass,
+                                                      isLandscape: isLandscape,
+                                                      isDynamic: model.isNewTabPageCustomizationEnabled)
             let result = model.prefixedFavorites(for: columns)
 
-            NewTabPageGridView(geometry: geometry) { _ in
+            NewTabPageGridView(geometry: geometry, isUsingDynamicSpacing: model.isNewTabPageCustomizationEnabled) { _ in
                 ReorderableForEach(result.items) { item in
                     viewFor(item)
                         .previewShape()

DuckDuckGo/FavoritesViewModel.swift

@@ -54,7 +54,8 @@ class FavoritesViewModel: ObservableObject {
     private let favoriteDataSource: NewTabPageFavoriteDataSource
     private let pixelFiring: PixelFiring.Type
     private let dailyPixelFiring: DailyPixelFiring.Type
-    private let isNewTabPageCustomizationEnabled: Bool
+
+    let isNewTabPageCustomizationEnabled: Bool
 
     var isEmpty: Bool {
         allFavorites.filter(\.isFavorite).isEmpty

DuckDuckGo/NewTabPageGridView.swift

@@ -24,14 +24,15 @@ struct NewTabPageGridView<Content: View>: View {
     @Environment(\.isLandscapeOrientation) var isLandscape
 
     let geometry: GeometryProxy?
+    let isUsingDynamicSpacing: Bool
     @ViewBuilder var content: (_ columnsCount: Int) -> Content
 
     @State private var width: CGFloat = .zero
 
     var body: some View {
-        let columnsCount = NewTabPageGrid.columnsCount(for: horizontalSizeClass, isLandscape: isLandscape)
+        let columnsCount = NewTabPageGrid.columnsCount(for: horizontalSizeClass, isLandscape: isLandscape, isDynamic: isUsingDynamicSpacing)
 
-        LazyVGrid(columns: flexibleColumns(columnsCount, width: width), spacing: 24, content: {
+        LazyVGrid(columns: createColumns(columnsCount), spacing: 24, content: {
             content(columnsCount)
         })
         .frame(maxWidth: .infinity)
@@ -41,12 +42,14 @@ struct NewTabPageGridView<Content: View>: View {
             return geometry[anchor].width
         })
         .onPreferenceChange(FramePreferenceKey.self, perform: { value in
-            width = value
+            if isUsingDynamicSpacing {
+                width = value
+            }
         })
         .padding(0)
     }
 
-    private func flexibleColumns(_ count: Int, width: CGFloat) -> [GridItem] {
+    private func flexibleColumns(_ count: Int) -> [GridItem] {
         let spacing: CGFloat?
         if width != .zero {
             let columnsWidth = NewTabPageGrid.Item.edgeSize * Double(count)
@@ -62,6 +65,17 @@ struct NewTabPageGridView<Content: View>: View {
                                          alignment: .top),
                      count: count)
     }
+
+    private func staticColumns(_ count: Int) -> [GridItem] {
+        return Array(repeating: GridItem(.fixed(NewTabPageGrid.Item.edgeSize),
+                                         spacing: NewTabPageGrid.Item.staticSpacing,
+                                         alignment: .top),
+                     count: count)
+    }
+
+    private func createColumns(_ count: Int) -> [GridItem] {
+        isUsingDynamicSpacing ? flexibleColumns(count) : staticColumns(count)
+    }
 }
 
 private struct FramePreferenceKey: PreferenceKey {
@@ -72,17 +86,39 @@ private struct FramePreferenceKey: PreferenceKey {
 }
 
 enum NewTabPageGrid {
-    enum ColumnCount {
-        static let compact = 4
-        static let regular = 6
+    static func columnsCount(for sizeClass: UserInterfaceSizeClass?, isLandscape: Bool, isDynamic: Bool) -> Int {
+        if isDynamic {
+            let usesWideLayout = isLandscape || sizeClass == .regular
+            return usesWideLayout ? ColumnCount.regular : ColumnCount.compact
+        } else {
+            return staticGridColumnsCount(for: sizeClass)
+        }
+    }
+
+    static func staticGridWidth(for sizeClass: UserInterfaceSizeClass?) -> CGFloat {
+        let columnsCount = CGFloat(staticGridColumnsCount(for: sizeClass))
+        return columnsCount * Item.edgeSize + (columnsCount - 1) * Item.staticSpacing
+    }
+
+    private static func staticGridColumnsCount(for sizeClass: UserInterfaceSizeClass?) -> Int {
+        let isPad = UIDevice.current.userInterfaceIdiom == .pad
+
+        return isPad && sizeClass == .regular ? ColumnCount.staticWideLayout : ColumnCount.compact
     }
 
     enum Item {
         static let edgeSize = 64.0
     }
+}
 
-    static func columnsCount(for sizeClass: UserInterfaceSizeClass?, isLandscape: Bool) -> Int {
-        let usesWideLayout = isLandscape || sizeClass == .regular
-        return usesWideLayout ? ColumnCount.regular : ColumnCount.compact
+private extension NewTabPageGrid {
+    enum ColumnCount {
+        static let compact = 4
+        static let regular = 6
+        static let staticWideLayout = 5
     }
 }
+
+private extension NewTabPageGrid.Item {
+    static let staticSpacing = 32.0
+}

DuckDuckGo/ShortcutsView.swift

@@ -26,7 +26,7 @@ struct ShortcutsView: View {
     let proxy: GeometryProxy?
 
     var body: some View {
-        NewTabPageGridView(geometry: proxy) { _ in
+        NewTabPageGridView(geometry: proxy, isUsingDynamicSpacing: true) { _ in
             ForEach(shortcuts) { shortcut in
                 Button {
                     model.openShortcut(shortcut)

DuckDuckGo/SimpleNewTabPageView.swift

@@ -81,7 +81,7 @@ private extension SimpleNewTabPageView {
 
                     favoritesSectionView(proxy: proxy)
                 }
-                .padding(Metrics.largePadding)
+                .padding(sectionsViewPadding(in: proxy))
             }
             .withScrollKeyboardDismiss()
         }
@@ -99,7 +99,7 @@ private extension SimpleNewTabPageView {
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
         }
-        .padding(Metrics.largePadding)
+        .padding(Metrics.regularPadding)
     }
 
     private var messagesSectionView: some View {
@@ -115,6 +115,11 @@ private extension SimpleNewTabPageView {
                       isAddingFavorite: .constant(false),
                       geometry: proxy)
     }
+
+    private func sectionsViewPadding(in geometry: GeometryProxy) -> CGFloat {
+        let requiredWidth = NewTabPageGrid.staticGridWidth(for: horizontalSizeClass) + Metrics.regularPadding
+        return geometry.frame(in: .local).width >= requiredWidth ? Metrics.regularPadding : Metrics.smallPadding
+    }
 }
 
 private extension View {
@@ -130,8 +135,8 @@ private extension View {
 
 private struct Metrics {
 
-    static let regularPadding = 16.0
-    static let largePadding = 24.0
+    static let smallPadding = 12.0
+    static let regularPadding = 24.0
     static let sectionSpacing = 32.0
     static let nonGridSectionTopPadding = -8.0