From 35faf5bdd2f62a12b68a8bf95172f621de7a17c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Thu, 29 Oct 2026 12:36:22 -0700
Subject: [PATCH 1/2] CategoryView: Use Granite.Box

---
 data/styles/CategoryView.scss | 4 ----
 src/CategoryView.vala         | 3 +--
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/data/styles/CategoryView.scss b/data/styles/CategoryView.scss
index 38c1b61f..ef9a170e 100644
--- a/data/styles/CategoryView.scss
+++ b/data/styles/CategoryView.scss
@@ -1,10 +1,6 @@
 category-view .main-clamp {
     padding: rem(12px);
 
-    .category-box {
-        border-spacing: rem(24px);
-    }
-
     .rich-list row {
         border-radius: rem(3px);
     }
diff --git a/src/CategoryView.vala b/src/CategoryView.vala
index e06dde62..e0cde6e3 100644
--- a/src/CategoryView.vala
+++ b/src/CategoryView.vala
@@ -56,14 +56,13 @@ public class Switchboard.CategoryView : Adw.NavigationPage {
         plug_search = new PlugsSearch ();
         plug_search_result = new Gee.ArrayList<SearchEntry?> ();
 
-        var category_box = new Gtk.Box (VERTICAL, 0) {
+        var category_box = new Granite.Box (VERTICAL, DOUBLE) {
             vexpand = true
         };
         category_box.append (personal_category);
         category_box.append (hardware_category);
         category_box.append (network_category);
         category_box.append (system_category);
-        category_box.add_css_class ("category-box");
 
         stack = new Gtk.Stack () {
             transition_type = CROSSFADE,

From fbe02edce8da662f67393c3c585e76d1e860455e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Thu, 29 Oct 2026 12:40:03 -0700
Subject: [PATCH 2/2] CategoryIcon: Use Granite.Box, CSS margins and icon size

---
 data/styles/CategoryView.scss | 4 ++++
 src/Widgets/CategoryIcon.vala | 9 ++-------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/data/styles/CategoryView.scss b/data/styles/CategoryView.scss
index ef9a170e..c31fde49 100644
--- a/data/styles/CategoryView.scss
+++ b/data/styles/CategoryView.scss
@@ -4,4 +4,8 @@ category-view .main-clamp {
     .rich-list row {
         border-radius: rem(3px);
     }
+
+    flowboxchild box {
+        margin: 0.5rem;
+    }
 }
diff --git a/src/Widgets/CategoryIcon.vala b/src/Widgets/CategoryIcon.vala
index 36c61a61..f7e0da11 100644
--- a/src/Widgets/CategoryIcon.vala
+++ b/src/Widgets/CategoryIcon.vala
@@ -31,7 +31,7 @@ public class Switchboard.CategoryIcon : Gtk.FlowBoxChild {
 
     construct {
         var icon = new Gtk.Image.from_icon_name (plug.icon) {
-            pixel_size = 32,
+            icon_size = LARGE,
             tooltip_text = plug.description
         };
 
@@ -42,12 +42,7 @@ public class Switchboard.CategoryIcon : Gtk.FlowBoxChild {
             xalign = 0
         };
 
-        var layout = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6) {
-            margin_top = 6,
-            margin_end = 6,
-            margin_bottom = 6,
-            margin_start = 6
-        };
+        var layout = new Granite.Box (HORIZONTAL, HALF);
         layout.append (icon);
         layout.append (plug_name);