Added padding to elements on Activities page

Author: moozzi

app/assets/stylesheets/components/activities.css

@@ -1,14 +1,31 @@
+.activities-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-3);
+  border-bottom: var(--border-width) solid var(--color-border);
+
+  & h2 {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    margin: 0;
+  }
+}
+
 .activity-search {
   display: flex;
   gap: var(--spacing-3);
   margin: var(--spacing-3) 0;
+  padding: 0 var(--spacing-3);
 }
 
 .activities-list {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3);
-  margin-top: var(--spacing-2);
+  margin: var(--spacing-2) 0;
+  padding: 0 var(--spacing-3);
 }
 
 .activity-card {

app/assets/stylesheets/components/topics.css

@@ -59,22 +59,6 @@
 
 /* ─────────────────────────────────────────────────────────────────── */
 
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--spacing-6);
-  padding-bottom: var(--spacing-3);
-  border-bottom: var(--border-width) solid var(--color-border);
-
-  & h2 {
-    font-size: var(--font-size-2xl);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
-    margin: 0;
-  }
-}
-
 .new-topics-banner {
   background: linear-gradient(to right, var(--color-primary-50), var(--color-primary-100));
   border: var(--border-width) solid var(--color-primary-300);

app/views/activities/index.html.slim

@@ -1,6 +1,6 @@
 - content_for :title, "Activity"
 
-.section-header
+.activities-header
   h2 Activity
   - if @unread_count.positive?
     = button_to "Mark all read (#{@unread_count})", mark_all_read_activities_path, method: :post, class: "button-secondary"