From 97fb5a80d04f2c5db6802231ee51230f6aa2da0c Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 26 Apr 2023 21:24:26 -0700
Subject: [PATCH] fix(ui): restore page margin and background color. Closes
 #2959

---
 .../ContentHeader/ContentHeader.module.scss   |  4 ++--
 web/components/layouts/Main/Main.module.scss  |  4 ++--
 web/components/ui/Content/Content.tsx         | 21 +++++++++++--------
 .../ui/Content/DesktopContent.module.scss     |  7 +++++++
 .../ui/Content/MobileContent.module.scss      |  4 ++++
 5 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 web/components/ui/Content/DesktopContent.module.scss

diff --git a/web/components/common/ContentHeader/ContentHeader.module.scss b/web/components/common/ContentHeader/ContentHeader.module.scss
index 47c4bda06..79251c388 100644
--- a/web/components/common/ContentHeader/ContentHeader.module.scss
+++ b/web/components/common/ContentHeader/ContentHeader.module.scss
@@ -6,8 +6,8 @@ $vert-spacing: 0.75rem;
   position: relative;
   display: grid;
   padding: var(--content-padding);
-  padding-left: calc(var(--content-padding) * 2);
-  padding-right: calc(var(--content-padding) * 2);
+  padding-left: var(--content-padding);
+  padding-right: var(--content-padding);
 }
 
 .row {
diff --git a/web/components/layouts/Main/Main.module.scss b/web/components/layouts/Main/Main.module.scss
index f1f59a9a4..246d2dbf6 100644
--- a/web/components/layouts/Main/Main.module.scss
+++ b/web/components/layouts/Main/Main.module.scss
@@ -3,6 +3,7 @@
 .layout {
   // this margin is for fixed header
   margin-top: 55px;
+  background-color: var(--theme-color-main-background);
   @include screen(tablet) {
     position: absolute;
     top: 0;
@@ -10,7 +11,6 @@
     bottom: 0;
     right: 0;
     // this one is for fixed footer
-    margin-bottom: 30px
+    margin-bottom: 30px;
   }
-  
 }
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 802109c82..3f5111c16 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -21,6 +21,7 @@ import {
 import { ClientConfig } from '../../../interfaces/client-config.model';
 
 import styles from './Content.module.scss';
+import desktopStyles from './DesktopContent.module.scss';
 import { Sidebar } from '../Sidebar/Sidebar';
 import { OfflineBanner } from '../OfflineBanner/OfflineBanner';
 import { AppStateOptions } from '../../stores/application-state';
@@ -271,15 +272,17 @@ export const Content: FC = () => {
             />
           ) : (
             <Col span={24} style={{ paddingRight: dynamicPadding }}>
-              <DesktopContent
-                name={name}
-                summary={summary}
-                tags={tags}
-                socialHandles={socialHandles}
-                extraPageContent={extraPageContent}
-                setShowFollowModal={setShowFollowModal}
-                supportFediverseFeatures={supportFediverseFeatures}
-              />
+              <div className={desktopStyles.bottomSectionContent}>
+                <DesktopContent
+                  name={name}
+                  summary={summary}
+                  tags={tags}
+                  socialHandles={socialHandles}
+                  extraPageContent={extraPageContent}
+                  setShowFollowModal={setShowFollowModal}
+                  supportFediverseFeatures={supportFediverseFeatures}
+                />
+              </div>
             </Col>
           )}
         </Row>
diff --git a/web/components/ui/Content/DesktopContent.module.scss b/web/components/ui/Content/DesktopContent.module.scss
new file mode 100644
index 000000000..0fae35c52
--- /dev/null
+++ b/web/components/ui/Content/DesktopContent.module.scss
@@ -0,0 +1,7 @@
+$bottomMargin: 4vh;
+
+.bottomSectionContent {
+  // background-color: green;
+  width: calc(100% - (2 * $bottomMargin));
+  margin: 0 $bottomMargin 0 $bottomMargin;
+}
diff --git a/web/components/ui/Content/MobileContent.module.scss b/web/components/ui/Content/MobileContent.module.scss
index 35b2d3c78..d6eceff05 100644
--- a/web/components/ui/Content/MobileContent.module.scss
+++ b/web/components/ui/Content/MobileContent.module.scss
@@ -9,3 +9,7 @@
   position: relative;
   top: 0px;
 }
+
+.mobileTabs {
+  margin-bottom: 0px;
+}