From ad483d1b6bf59e1605acaf17885fd9f2080b4885 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Thu, 1 Oct 2026 14:57:30 -0700
Subject: [PATCH 1/2] SearchListItem: use Granite.ListItem and HeaderLabel

---
 data/styles/SearchPage.scss     |  5 +++-
 src/Widgets/SearchListItem.vala | 41 +++++++++++----------------------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/data/styles/SearchPage.scss b/data/styles/SearchPage.scss
index de58382d1..d1b6b9deb 100644
--- a/data/styles/SearchPage.scss
+++ b/data/styles/SearchPage.scss
@@ -5,6 +5,9 @@ navigation-view-page.search {
 }
 
 search-list-item {
-    border-spacing: 1em 0;
     margin: 0.5em 1em;
+
+    header {
+        margin: 0;
+    }
 }
diff --git a/src/Widgets/SearchListItem.vala b/src/Widgets/SearchListItem.vala
index fd84bb902..d1439f4a7 100644
--- a/src/Widgets/SearchListItem.vala
+++ b/src/Widgets/SearchListItem.vala
@@ -3,26 +3,26 @@
  * SPDX-FileCopyrightText: 2025 elementary, Inc. (https://elementary.io)
  */
 
-public class AppCenter.SearchListItem : Gtk.Grid {
+public class AppCenter.SearchListItem : Granite.ListItem {
     public AppCenterCore.Package package {
         set {
             app_icon.package = value;
-            name_label.label = value.name;
-            summary_label.label = value.get_summary ();
+            label.label = value.name;
+            label.secondary_text = value.get_summary ();
 
             if (action_stack != null) {
-                remove (action_stack);
+                box.remove (action_stack);
             }
 
             action_stack = new ActionStack (value);
-            attach (action_stack, 2, 0, 1, 2);
+            box.append (action_stack);
         }
     }
 
     private AppCenter.ActionStack action_stack;
     private AppCenter.AppIcon app_icon;
-    private Gtk.Label name_label;
-    private Gtk.Label summary_label;
+    private Granite.Box box;
+    private Granite.HeaderLabel label;
 
     class construct {
         set_css_name ("search-list-item");
@@ -31,29 +31,16 @@ public class AppCenter.SearchListItem : Gtk.Grid {
     construct {
         app_icon = new AppIcon (48);
 
-        name_label = new Gtk.Label (null) {
+        label = new Granite.HeaderLabel ("") {
             ellipsize = END,
-            max_width_chars = 30,
-            valign = END,
-            xalign = 0
+            size = H3,
+            valign = CENTER
         };
-        name_label.add_css_class (Granite.STYLE_CLASS_H3_LABEL);
 
-        summary_label = new Gtk.Label (null) {
-            ellipsize = END,
-            hexpand = true,
-            lines = 2,
-            width_chars = 20,
-            max_width_chars = 35,
-            valign = START,
-            wrap = true,
-            xalign = 0
-        };
-        summary_label.add_css_class (Granite.CssClass.DIM);
-        summary_label.add_css_class (Granite.CssClass.SMALL);
+        box = new Granite.Box (HORIZONTAL);
+        box.append (app_icon);
+        box.append (label);
 
-        attach (app_icon, 0, 0, 1, 2);
-        attach (name_label, 1, 0);
-        attach (summary_label, 1, 1);
+        child = box;
     }
 }

From 7696dd6077fe2f8cc445cdb7bca79027cddc37d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Thu, 1 Oct 2026 15:11:06 -0700
Subject: [PATCH 2/2] use ClampScrollable, fix listitem selector

---
 data/styles/SearchPage.scss     | 4 +---
 src/Views/SearchView.vala       | 8 +++++++-
 src/Widgets/SearchListItem.vala | 5 +----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/data/styles/SearchPage.scss b/data/styles/SearchPage.scss
index d1b6b9deb..7623f5017 100644
--- a/data/styles/SearchPage.scss
+++ b/data/styles/SearchPage.scss
@@ -4,9 +4,7 @@ navigation-view-page.search {
     }
 }
 
-search-list-item {
-    margin: 0.5em 1em;
-
+granite-listitem.search {
     header {
         margin: 0;
     }
diff --git a/src/Views/SearchView.vala b/src/Views/SearchView.vala
index eedee1132..d5ec36c24 100644
--- a/src/Views/SearchView.vala
+++ b/src/Views/SearchView.vala
@@ -77,8 +77,14 @@ public class AppCenter.SearchView : Adw.NavigationPage {
             single_click_activate = true
         };
 
-        scrolled = new Gtk.ScrolledWindow () {
+        var clamp_scrollable = new Adw.ClampScrollable () {
             child = grid_view,
+            maximum_size = 800,
+            tightening_threshold = 800
+        };
+
+        scrolled = new Gtk.ScrolledWindow () {
+            child = clamp_scrollable,
             hscrollbar_policy = NEVER
         };
 
diff --git a/src/Widgets/SearchListItem.vala b/src/Widgets/SearchListItem.vala
index d1439f4a7..e806445eb 100644
--- a/src/Widgets/SearchListItem.vala
+++ b/src/Widgets/SearchListItem.vala
@@ -24,10 +24,6 @@ public class AppCenter.SearchListItem : Granite.ListItem {
     private Granite.Box box;
     private Granite.HeaderLabel label;
 
-    class construct {
-        set_css_name ("search-list-item");
-    }
-
     construct {
         app_icon = new AppIcon (48);
 
@@ -42,5 +38,6 @@ public class AppCenter.SearchListItem : Granite.ListItem {
         box.append (label);
 
         child = box;
+        add_css_class ("search");
     }
 }