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.
duckduckgo · Dec 12, 2024 · f17094d · f17094d
1 parent 880e065
commit f17094d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git 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
@@ -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()