From d2e604d8560dfd54d413780e15bb3bfaea75ca63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mariusz=20=C5=9Apiewak?= <dus7@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:01:15 +0100
Subject: [PATCH] Make NTP Grid layout adaptive for various screen sizes
 (#3657)

Task/Issue URL:
https://app.asana.com/0/1206226850447395/1208868059663007/f
Tech Design URL:
CC:

**Description**:

Addresses NTP layout issues when it's too wide to fit 4 items. It mostly
changes how the spacings and item sizes are being defined.

**Steps to test this PR**:
1. Create a bunch of Favorites.
2. Test layout in various environments: iPod touch, iPhone, iPad, iPad
with Split View, different orientations.

**Definition of Done (Internal Only)**:

* [ ] Does this PR satisfy our [Definition of
Done](https://app.asana.com/0/1202500774821704/1207634633537039/f)?

**Orientation Testing**:

* [ ] Portrait
* [ ] Landscape

**Device Testing**:

* [ ] iPhone SE (1st Gen)
* [ ] iPhone 8
* [ ] iPhone X
* [ ] iPhone 14 Pro
* [ ] iPad
* [ ] iPod touch

**OS Testing**:

* [ ] iOS 15
* [ ] iOS 16
* [ ] iOS 17

---
###### Internal references:
[Software Engineering
Expectations](https://app.asana.com/0/59792373528535/199064865822552)
[Technical Design
Template](https://app.asana.com/0/59792373528535/184709971311943)
---
 DuckDuckGo/NewTabPageGridView.swift   | 19 ++++++++++++++-----
 DuckDuckGo/SimpleNewTabPageView.swift |  5 +++--
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/DuckDuckGo/NewTabPageGridView.swift b/DuckDuckGo/NewTabPageGridView.swift
index ffcffc0e17..f7e4390815 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] {
@@ -120,5 +127,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..a228686ef5 100644
--- a/DuckDuckGo/SimpleNewTabPageView.swift
+++ b/DuckDuckGo/SimpleNewTabPageView.swift
@@ -117,8 +117,7 @@ private extension SimpleNewTabPageView {
     }
 
     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
+        geometry.frame(in: .local).width > Metrics.verySmallScreenWidth ? Metrics.regularPadding : Metrics.smallPadding
     }
 }
 
@@ -142,6 +141,8 @@ private struct Metrics {
 
     static let messageMaximumWidth: CGFloat = 380
     static let messageMaximumWidthPad: CGFloat = 455
+
+    static let verySmallScreenWidth: CGFloat = 320
 }
 
 // MARK: - Preview