fix(ui): restore page margin and background color. Closes #2959

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 {

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;
   }
-  
 }

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,6 +272,7 @@ export const Content: FC = () => {
             />
           ) : (
             <Col span={24} style={{ paddingRight: dynamicPadding }}>
+              <div className={desktopStyles.bottomSectionContent}>
                 <DesktopContent
                   name={name}
                   summary={summary}
@@ -280,6 +282,7 @@ export const Content: FC = () => {
                   setShowFollowModal={setShowFollowModal}
                   supportFediverseFeatures={supportFediverseFeatures}
                 />
+              </div>
             </Col>
           )}
         </Row>

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;
+}

web/components/ui/Content/MobileContent.module.scss

@@ -9,3 +9,7 @@
   position: relative;
   top: 0px;
 }
+
+.mobileTabs {
+  margin-bottom: 0px;
+}