From 78a579bb6410786625114dabbbaa278922258a11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mariusz=20=C5=9Apiewak?= <mspiewak@duckduckgo.com>
Date: Mon, 2 Dec 2024 12:32:57 +0100
Subject: [PATCH] Make NTP Grid layout adaptive for various screen sizes

---
 DuckDuckGo/FavoriteIconView.swift     | 31 ++++++++++++---------------
 DuckDuckGo/NewTabPageGridView.swift   | 25 ++++++++++++++++-----
 DuckDuckGo/SimpleNewTabPageView.swift |  3 ++-
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/DuckDuckGo/FavoriteIconView.swift b/DuckDuckGo/FavoriteIconView.swift
index a640fcf95e..9fba6790e4 100644
--- a/DuckDuckGo/FavoriteIconView.swift
+++ b/DuckDuckGo/FavoriteIconView.swift
@@ -33,25 +33,22 @@ struct FavoriteIconView: View {
     let faviconLoading: FavoritesFaviconLoading?
 
     var body: some View {
-        ZStack {
-            RoundedRectangle(cornerRadius: 8)
-                .fill(Color(designSystemColor: .surface))
-                .shadow(color: .shade(0.12), radius: 0.5, y: 1)
-                .aspectRatio(1, contentMode: .fit)
-
-            Image(uiImage: favicon.image)
-                .resizable()
-                .aspectRatio(1.0, contentMode: .fit)
-                .if(favicon.isUsingBorder) {
-                    $0.padding(Constant.borderSize)
+        RoundedRectangle(cornerRadius: 8)
+            .fill(Color(designSystemColor: .surface))
+            .shadow(color: .shade(0.12), radius: 0.5, y: 1)
+            .aspectRatio(1, contentMode: .fit)
+            .overlay {
+                Image(uiImage: favicon.image)
+                    .resizable()
+                    .aspectRatio(1.0, contentMode: .fill)
+                    .padding(favicon.isUsingBorder ? Constant.borderSize : 0)
+                    .clipShape(RoundedRectangle(cornerRadius: 8))
+            }
+            .task {
+                if favicon.isFake, let favicon = await faviconLoading?.loadFavicon(for: favorite, size: Constant.faviconSize) {
+                    self.favicon = favicon
                 }
-                .clipShape(RoundedRectangle(cornerRadius: 8))
-        }
-        .task {
-            if favicon.isFake, let favicon = await faviconLoading?.loadFavicon(for: favorite, size: Constant.faviconSize) {
-                self.favicon = favicon
             }
-        }
     }
 }
 
diff --git a/DuckDuckGo/NewTabPageGridView.swift b/DuckDuckGo/NewTabPageGridView.swift
index ffcffc0e17..5cbc7b71e3 100644
--- a/DuckDuckGo/NewTabPageGridView.swift
+++ b/DuckDuckGo/NewTabPageGridView.swift
@@ -32,7 +32,7 @@ struct NewTabPageGridView<Content: View>: View {
     var body: some View {
         let columnsCount = NewTabPageGrid.columnsCount(for: horizontalSizeClass, isLandscape: isLandscape, isDynamic: isUsingDynamicSpacing)
 
-        LazyVGrid(columns: createColumns(columnsCount), spacing: 24, content: {
+        LazyVGrid(columns: createColumns(columnsCount), alignment: .center, spacing: 24, content: {
             content(columnsCount)
         })
         .frame(maxWidth: .infinity)
@@ -67,10 +67,17 @@ struct NewTabPageGridView<Content: View>: View {
     }
 
     private func staticColumns(_ count: Int) -> [GridItem] {
-        return Array(repeating: GridItem(.fixed(NewTabPageGrid.Item.edgeSize),
-                                         spacing: NewTabPageGrid.Item.staticSpacing,
-                                         alignment: .top),
+        let isRegularSizeClassOnPad =  UIDevice.current.userInterfaceIdiom == .pad && horizontalSizeClass == .regular
+
+        let spacing: CGFloat = isRegularSizeClassOnPad ? NewTabPageGrid.Item.staticSpacingPad : NewTabPageGrid.Item.staticSpacing
+        let maximumSize = NewTabPageGrid.Item.maximumWidth - spacing
+        let itemSize = GridItem.Size.flexible(minimum: NewTabPageGrid.Item.edgeSize,
+                                          // This causes automatic (larger) spacing, when spacing itself is small comparing to parent view width.
+                                              maximum: maximumSize)
+
+        return Array(repeating: GridItem(itemSize, spacing: spacing, alignment: .top),
                      count: count)
+
     }
 
     private func createColumns(_ count: Int) -> [GridItem] {
@@ -106,6 +113,12 @@ enum NewTabPageGrid {
         return isPad && sizeClass == .regular ? ColumnCount.staticWideLayout : ColumnCount.compact
     }
 
+    static func staticGridSpacing(for sizeClass: UserInterfaceSizeClass?) -> CGFloat? {
+        let isPad = UIDevice.current.userInterfaceIdiom == .pad
+
+        return isPad && sizeClass == .regular ? NewTabPageGrid.Item.staticSpacingPad : nil
+    }
+
     enum Item {
         static let edgeSize = 64.0
     }
@@ -120,5 +133,7 @@ private extension NewTabPageGrid {
 }
 
 private extension NewTabPageGrid.Item {
-    static let staticSpacing = 32.0
+    static let staticSpacing = 10.0
+    static let staticSpacingPad = 32.0
+    static let maximumWidth = 128.0
 }
diff --git a/DuckDuckGo/SimpleNewTabPageView.swift b/DuckDuckGo/SimpleNewTabPageView.swift
index d674e59e32..e9d33027f6 100644
--- a/DuckDuckGo/SimpleNewTabPageView.swift
+++ b/DuckDuckGo/SimpleNewTabPageView.swift
@@ -81,7 +81,8 @@ private extension SimpleNewTabPageView {
 
                     favoritesSectionView(proxy: proxy)
                 }
-                .padding(sectionsViewPadding(in: proxy))
+                .padding(.vertical, Metrics.regularPadding)
+                .padding(.horizontal, Metrics.smallPadding)
             }
             .withScrollKeyboardDismiss()
         }