Fix style regressions (#3062)

From #2327 - Elephant friend was overlapping with text, oversized in
single column layout

From #2021 - Centered layout goes against design principles, changes
UX for everybody who's already used to the current one

From #2271 - CPU/RAM overusage from keeping columns in DOM (fix #2648,
possibly also #2101)

2 files changed, 1 insertions, 28 deletions

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 773ef0a5b..4de8b7969 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1312,23 +1312,6 @@
   }
 }
 
-@media screen and (min-width: 1397px) { /* Width of 4 columns with margins */
-  .columns-area {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-@media screen and (min-width: 1900px) {
-  .column,
-  .drawer {
-    width: 400px;
-    border-radius: 4px;
-    height: 96vh;
-    margin-top: 2vh;
-  }
-}
-
 .drawer__pager {
   box-sizing: border-box;
   padding: 0;
@@ -1772,7 +1755,7 @@
 .getting-started {
   box-sizing: border-box;
   padding-bottom: 235px;
-  background: url('../images/mastodon-getting-started.png') no-repeat 0 100% / contain local;
+  background: url('../images/mastodon-getting-started.png') no-repeat 0 100%;
   flex: 1 0 auto;
 
   p {
diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss
index 390b9596c..68f73e0c0 100644
--- a/app/javascript/styles/containers.scss
+++ b/app/javascript/styles/containers.scss
@@ -9,16 +9,6 @@
   }
 }
 
-.mastodon-column-container {
-  display: flex;
-  height: 100%;
-  width: 100%;
-
-  // 707568 - height 100% doesn't work on child of a flex item - chromium - Monorail
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=707568
-  flex: 1 1 auto;
-}
-
 .logo-container {
   max-width: 400px;
   margin: 100px auto;