Added margins to user profile, reports and topic show pages

Author: moozzi

app/assets/stylesheets/components/messages.css

@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
+  margin-left: var(--spacing-4);
+  margin-right: var(--spacing-4);
 }
 
 .message-card {

app/assets/stylesheets/components/profile.css

@@ -2,6 +2,12 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-6);
+  margin-top: var(--spacing-4);
+}
+
+.person-profile > * {
+  margin-left: var(--spacing-4);
+  margin-right: var(--spacing-4);
 }
 
 .profile-header {

app/assets/stylesheets/components/reports.css

@@ -2,6 +2,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-6);
+  margin-left: var(--spacing-4);
+  margin-right: var(--spacing-4);
+  margin-top: var(--spacing-4);
 }
 
 .reports-header {
@@ -12,7 +15,6 @@
   background: var(--color-bg-card);
   border: var(--border-width) solid var(--color-border);
   border-radius: var(--border-radius-lg);
-  border-top: 3px solid var(--color-primary);
 }
 
 .reports-header-nav {

app/assets/stylesheets/components/sidebar.css

@@ -1,4 +1,5 @@
 .sidebar {
+  margin-left: var(--spacing-3);
   position: sticky;
   top: calc(var(--nav-height) + var(--spacing-5));
   align-self: start;

app/assets/stylesheets/components/stats.css

@@ -2,6 +2,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-6);
+  margin-left: var(--spacing-4);
+  margin-right: var(--spacing-4);
+  margin-top: var(--spacing-4);
 }
 
 .stats-intro {
@@ -14,6 +17,8 @@
   gap: var(--spacing-3);
   position: sticky;
   top: var(--spacing-6);
+  margin-left: var(--spacing-2);
+  margin-top: var(--spacing-2);
 }
 
 .stats-controls {

app/assets/stylesheets/layouts/topic-view.css

@@ -8,6 +8,9 @@
   border-radius: var(--border-radius-lg);
   padding: var(--spacing-6);
   margin-bottom: var(--spacing-6);
+  margin-left: var(--spacing-4);
+  margin-right: var(--spacing-4);
+  margin-top: var(--spacing-4);
 }
 
 .topic-title-section {