Refactor tweet/timeline views

src/sass/profile/_base.scss

@@ -47,7 +47,7 @@
     .profile-tabs {
         width: 100vw;
 
-        .timeline-tab {
+        .timeline-container {
             width: 100% !important;
         }
     }

src/sass/timeline.scss

@@ -1,30 +1,19 @@
 @import '_variables';
 
-#posts {
+.timeline-container {
+    @include panel(100%, 600px);
+}
+
+.timeline {
     background-color: $bg_panel;
-}
 
-.timeline-tab {
-    float: right;
-    padding: 0;
-    box-sizing: border-box;
-    display: inline-block;
-    font-size: 14px;
-    text-align: left;
-    vertical-align: top;
-}
-
-.multi-timeline {
-    max-width: 600px;
-    width: 100%;
-    margin: 0 auto;
-
-    .timeline-tab {
-        width: 100%;
+    > div:not(:last-child) {
+        border-bottom: 1px solid $border_grey;
     }
+
 }
 
-.multi-header {
+.timeline-header {
     background-color: $bg_panel;
     text-align: center;
     padding: 10px;
@@ -72,10 +61,6 @@
     }
 }
 
-.timeline-tweet {
-    border-bottom: 1px solid $border_grey;
-}
-
 .timeline-footer {
     background-color: $bg_panel;
     padding: 6px 0;
@@ -119,11 +104,7 @@
     background-color: $bg_panel;
     text-align: center;
     padding: .75em 0;
-    display: block;
-
-    &.status-el {
-        border-bottom: 1px solid $border_grey;
-    }
+    display: block !important;
 
     a {
         background-color: $darkest_grey;
@@ -137,3 +118,11 @@
         }
     }
 }
+
+.timeline-item {
+    overflow-wrap: break-word;
+    border-left-width: 0;
+    min-width: 0;
+    padding: .75em;
+    display: flex;
+}

src/sass/tweet/_base.scss

@@ -7,25 +7,17 @@
 @import 'poll';
 @import 'quote';
 
-.status-el {
-    overflow-wrap: break-word;
-    border-left-width: 0;
-    min-width: 0;
-    padding: .75em;
-    display: flex;
-
-    .status-content {
-        font-family: $font_3;
-        line-height: 1.4em;
-    }
-}
-
-.status-body {
+.tweet-body {
     flex: 1;
     min-width: 0;
     margin-left: 58px;
 }
 
+.tweet-content {
+    font-family: $font_3;
+    line-height: 1.4em;
+}
+
 .tweet-header {
     padding: 0;
     vertical-align: bottom;
@@ -79,7 +71,6 @@
         float: left;
         margin-top: 3px;
         margin-left: -58px;
-        position: absolute;
         width: 48px;
         height: 48px;
         border-radius: 50%;

src/sass/tweet/thread.scss

@@ -10,7 +10,7 @@
     background-color: $bg_panel;
 }
 
-.main-tweet .status-content {
+.main-tweet .tweet-content {
     font-size: 20px;
 }
 
@@ -20,7 +20,7 @@
 }
 
 .thread-line {
-    .status-el::before {
+    .timeline-item::before {
         background: $accent_dark;
         content: '';
         position: relative;
@@ -53,7 +53,7 @@
     }
 }
 
-.thread-last .status-el::before {
+.timeline-item.thread-last::before {
     background: unset;
     min-width: unset;
     width: 0;