Improve scrolling desynchronization

https://gitlab.com/soapbox-pub/soapbox-fe/-/issues/749

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 {

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;

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