Added margins to user profile, reports and topic show pages (#66)

moozzi · web-flow · commit 3a094bab23b3 · 2026-02-18T08:37:35.000+01:00
diff --git a/app/assets/stylesheets/components/messages.css b/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 {
diff --git a/app/assets/stylesheets/components/profile.css b/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 {
diff --git a/app/assets/stylesheets/components/reports.css b/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 {
diff --git a/app/assets/stylesheets/components/sidebar.css b/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;
diff --git a/app/assets/stylesheets/components/stats.css b/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 {
diff --git a/app/assets/stylesheets/layouts/topic-view.css b/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 {

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,8 @@`
`2`	`2`	`display: flex;`
`3`	`3`	`flex-direction: column;`
`4`	`4`	`gap: var(--spacing-4);`
	`5`	`+ margin-left: var(--spacing-4);`
	`6`	`+ margin-right: var(--spacing-4);`
`5`	`7`	`}`
`6`	`8`
`7`	`9`	`.message-card {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`.sidebar {`
	`2`	`+ margin-left: var(--spacing-3);`
`2`	`3`	`position: sticky;`
`3`	`4`	`top: calc(var(--nav-height) + var(--spacing-5));`
`4`	`5`	`align-self: start;`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,9 @@`
`8`	`8`	`border-radius: var(--border-radius-lg);`
`9`	`9`	`padding: var(--spacing-6);`
`10`	`10`	`margin-bottom: var(--spacing-6);`
	`11`	`+ margin-left: var(--spacing-4);`
	`12`	`+ margin-right: var(--spacing-4);`
	`13`	`+ margin-top: var(--spacing-4);`
`11`	`14`	`}`
`12`	`15`
`13`	`16`	`.topic-title-section {`