From f17094d6944e80e7bf002807433005a949d47c3a Mon Sep 17 00:00:00 2001
From: Dominik Kapusta <dkapusta@duckduckgo.com>
Date: Thu, 12 Dec 2024 17:18:58 +0100
Subject: [PATCH] Fix displaying multi-line custom background category names
 (#3664)

Task/Issue URL: https://app.asana.com/0/1201621708115095/1208921971523524/f

Description:
This change fixes layout of BackgroundCategoryView to correctly align multi-line title labels with other grid items.
---
 .../BackgroundCategoryView.swift              | 35 ++++++++++---------
 .../BackgroundThumbnailView.swift             | 19 +++++-----
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/DuckDuckGo/HomePage/View/HomePageSettings/BackgroundCategoryView.swift b/DuckDuckGo/HomePage/View/HomePageSettings/BackgroundCategoryView.swift
index 95f6a45f12..2d9002c069 100644
--- a/DuckDuckGo/HomePage/View/HomePageSettings/BackgroundCategoryView.swift
+++ b/DuckDuckGo/HomePage/View/HomePageSettings/BackgroundCategoryView.swift
@@ -40,25 +40,28 @@ extension HomePage.Views {
 
         var body: some View {
             Button(action: action) {
-                VStack(alignment: .leading, spacing: Const.titleSpacing) {
-                    ZStack {
-                        if modeModel.contentType == .customImagePicker && !model.hasUserImages {
-                            BackgroundThumbnailView(displayMode: .addBackground)
-                        } else if modeModel.contentType == .defaultBackground {
-                            BackgroundThumbnailView(displayMode: .categoryView) {
-                                Color.newTabPageBackground
+                VStack(alignment: .leading, spacing: 0) {
+                    VStack(alignment: .leading, spacing: Const.titleSpacing) {
+                        ZStack {
+                            if modeModel.contentType == .customImagePicker && !model.hasUserImages {
+                                BackgroundThumbnailView(displayMode: .addBackground)
+                            } else if modeModel.contentType == .defaultBackground {
+                                BackgroundThumbnailView(displayMode: .categoryView) {
+                                    Color.newTabPageBackground
+                                }
+                            } else {
+                                BackgroundThumbnailView(
+                                    displayMode: .categoryView,
+                                    customBackground: modeModel.customBackgroundThumbnail ?? .solidColor(.color01)
+                                )
                             }
-                        } else {
-                            BackgroundThumbnailView(
-                                displayMode: .categoryView,
-                                customBackground: modeModel.customBackgroundThumbnail ?? .solidColor(.color01)
-                            )
+                        }
+                        if showTitle {
+                            Text(modeModel.title)
+                                .font(.system(size: 11))
                         }
                     }
-                    if showTitle {
-                        Text(modeModel.title)
-                            .font(.system(size: 11))
-                    }
+                    Spacer(minLength: 0)
                 }
             }
             .buttonStyle(.plain)
diff --git a/DuckDuckGo/HomePage/View/HomePageSettings/BackgroundThumbnailView.swift b/DuckDuckGo/HomePage/View/HomePageSettings/BackgroundThumbnailView.swift
index 33b78c82c3..259acc62d8 100644
--- a/DuckDuckGo/HomePage/View/HomePageSettings/BackgroundThumbnailView.swift
+++ b/DuckDuckGo/HomePage/View/HomePageSettings/BackgroundThumbnailView.swift
@@ -98,14 +98,17 @@ extension HomePage.Views {
 
         var body: some View {
             ZStack {
-                RoundedRectangle(cornerRadius: 4)
-                    .fill(.clear)
-                    .background(thumbnailContent)
-                    .cornerRadius(4)
-                RoundedRectangle(cornerRadius: 4)
-                    .stroke(Color.homeSettingsBackgroundPreviewStroke)
-                    .frame(height: SettingsView.Const.gridItemHeight)
-                    .background(selectionBackground)
+                Group {
+                    RoundedRectangle(cornerRadius: 4)
+                        .fill(.clear)
+                        .background(thumbnailContent)
+                        .cornerRadius(4)
+                    RoundedRectangle(cornerRadius: 4)
+                        .stroke(Color.homeSettingsBackgroundPreviewStroke)
+                        .background(selectionBackground)
+                }
+                .frame(height: SettingsView.Const.gridItemHeight)
+
                 if displayMode.allowsDeletingCustomBackgrounds, case .userImage(let image) = customBackground {
                     HStack {
                         Spacer()