From ce7eb29e1c9eeee908982f05a2e8b889cb6bf5d2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 26 Sep 2021 18:24:12 -0500
Subject: [PATCH] Improve scrolling desynchronization
 https://gitlab.com/soapbox-pub/soapbox-fe/-/issues/749

---
 app/styles/components/columns.scss |  6 ------
 app/styles/components/status.scss  | 14 --------------
 app/styles/ui.scss                 | 12 +++++++++++-
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 8d9d938ee..99ea5f2e5 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -337,15 +337,9 @@
   background: transparent;
   border-radius: 0;
   box-shadow: none;
-  margin-top: -10px;
 
   .column-back-button {
     background: transparent;
-    margin-bottom: -10px;
-  }
-
-  .slist {
-    margin-top: -10px;
   }
 
   .account__section-headline {
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 84fc5b257..d1adf44fb 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -132,20 +132,6 @@
   padding: 15px 0 10px;
 }
 
-.slist > .item-list > article {
-  &:first-child {
-    .status__wrapper {
-      margin-top: 10px;
-    }
-  }
-
-  &:last-child {
-    .status__wrapper {
-      margin-bottom: 10px;
-    }
-  }
-}
-
 .status__wrapper--filtered {
   color: var(--primary-text-color);
   border: 0;
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index f9f297354..5ff091ccb 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -150,7 +150,7 @@
   display: flex;
   align-items: flex-start;
   padding: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 
   .compose-form {
     flex: 1 1;
@@ -174,6 +174,10 @@
         border-left: 11px solid transparent;
         left: -22px;
         top: 13px;
+
+        @media (max-width: 405px) {
+          display: none;
+        }
       }
 
       .autosuggest-textarea__textarea {
@@ -744,3 +748,9 @@
     background: var(--accent-color);
   }
 }
+
+// Create a new Block Formatting Context to prevent the timelines from jumping
+// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+.slist > .item-list > article {
+  overflow: hidden;
+}