make spacing between discussions and headers explicit (#3084)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/core/client/stream/tabs/Discussions/MostActiveDiscussionsContainer.css

@@ -3,7 +3,7 @@
 }
 
 .list {
-  margin-left: 0;
+  margin: 0;
   padding-left: 0;
   counter-reset: activeDiscussionsCounter;
   list-style: none;

src/core/client/stream/tabs/Discussions/MostActiveDiscussionsContainer.tsx

@@ -5,6 +5,7 @@ import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { MostActiveDiscussionsContainer_site } from "coral-stream/__generated__/MostActiveDiscussionsContainer_site.graphql";
 
@@ -19,7 +20,10 @@ interface Props {
 
 const MostActiveDiscussionsContainer: FunctionComponent<Props> = ({ site }) => {
   return (
-    <div className={cn(styles.root, CLASSES.discussions.mostActiveDiscussions)}>
+    <HorizontalGutter
+      spacing={4}
+      className={cn(styles.root, CLASSES.discussions.mostActiveDiscussions)}
+    >
       <DiscussionsHeader
         header={
           <Localized id="discussions-mostActiveDiscussions">
@@ -49,7 +53,7 @@ const MostActiveDiscussionsContainer: FunctionComponent<Props> = ({ site }) => {
           </li>
         ))}
       </ol>
-    </div>
+    </HorizontalGutter>
   );
 };
 

src/core/client/stream/tabs/Discussions/MyOngoingDiscussionsContainer.css

@@ -3,7 +3,7 @@
 }
 
 .list {
-  margin-left: 0;
+  margin: 0;
   padding-left: 0;
 }
 

src/core/client/stream/tabs/Discussions/MyOngoingDiscussionsContainer.tsx

@@ -5,6 +5,7 @@ import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { MyOngoingDiscussionsContainer_settings } from "coral-stream/__generated__/MyOngoingDiscussionsContainer_settings.graphql";
 import { MyOngoingDiscussionsContainer_viewer } from "coral-stream/__generated__/MyOngoingDiscussionsContainer_viewer.graphql";
@@ -26,7 +27,10 @@ const MyOngoingDiscussionsContainer: FunctionComponent<Props> = ({
   currentSiteID,
 }) => {
   return (
-    <div className={cn(styles.root, CLASSES.discussions.myOngoingDiscussions)}>
+    <HorizontalGutter
+      className={cn(styles.root, CLASSES.discussions.myOngoingDiscussions)}
+      spacing={4}
+    >
       <DiscussionsHeader
         header={
           <Localized id="discussions-myOngoingDiscussions">
@@ -57,7 +61,7 @@ const MyOngoingDiscussionsContainer: FunctionComponent<Props> = ({
           </li>
         ))}
       </ul>
-    </div>
+    </HorizontalGutter>
   );
 };