From 2ba6023926e0e3150d03f7fab3ab9fb3efad1dab Mon Sep 17 00:00:00 2001
From: saltrafael <76502841+saltrafael@users.noreply.github.com>
Date: Mon, 4 Oct 2021 10:19:52 -0300
Subject: [PATCH] Fix spacing / centering live stream + comments section
 (#7225)

---
 ui/scss/component/_livestream.scss |  2 --
 ui/scss/component/_main.scss       | 42 ++++++++++++++++++++++++------
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss
index 20e9559c7..a2373f683 100644
--- a/ui/scss/component/_livestream.scss
+++ b/ui/scss/component/_livestream.scss
@@ -27,8 +27,6 @@ $recent-msg-button__height: 2rem;
 
 .livestream__discussion {
   width: 100%;
-  margin-top: var(--spacing-m);
-  margin-bottom: var(--spacing-s);
 
   @media (min-width: $breakpoint-medium) {
     margin: 0;
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 37c11b8a2..266d66428 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -207,17 +207,43 @@
 }
 
 .main--livestream {
-  width: calc(100vw - var(--spacing-xs) * 2);
-  margin: var(--spacing-xs);
+  @extend .main--file-page;
+  margin: 0;
+  padding: 0;
+  max-width: none;
 
-  @media (min-width: $breakpoint-medium) {
-    margin: var(--spacing-m);
-    margin-right: calc(var(--livestream-comments-width) + var(--spacing-m));
-    width: calc(100vw - var(--livestream-comments-width) - var(--spacing-m) * 2);
+  .card-stack {
+    margin-top: var(--spacing-m);
+    margin-bottom: var(--spacing-m);
+
+    @media (min-width: $breakpoint-large + 300px) {
+      max-width: calc(var(--page-max-width--filepage) / 1.25);
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-large + 300px) {
+      max-width: calc(100vw - var(--livestream-comments-width) - var(--spacing-m) * 3);
+      margin-left: var(--spacing-m);
+      margin-right: var(--spacing-m);
+    }
+
+    @media (max-width: $breakpoint-medium) {
+      max-width: none;
+    }
   }
 
-  @media (min-width: $breakpoint-large) {
-    margin-right: calc(10vw + var(--livestream-comments-width) + var(--spacing-m));
+  .main__right-side {
+    width: var(--livestream-comments-width);
+
+    @media (max-width: $breakpoint-medium) {
+      width: 100%;
+      margin-bottom: var(--spacing-m);
+    }
+  }
+
+  @media (max-width: $breakpoint-medium) {
+    padding: 0 var(--spacing-m);
   }
 }