#344 - replace float: with flexbox, clean up

src/components/chat_panel/chat_panel.vue

@@ -3,8 +3,8 @@
     <div class="panel panel-default">
       <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel">
         <div class="title">
-          {{$t('chat.title')}}
-          <i class="icon-cancel" style="float: right;" v-if="floating"></i>
+          <span>{{$t('chat.title')}}</span>
+          <i class="icon-cancel" v-if="floating"></i>
         </div>
       </div>
       <div class="chat-window" v-chat-scroll>
@@ -98,4 +98,11 @@
     resize: none;
   }
 }
+
+.chat-panel {
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
 </style>

src/components/notifications/notifications.scss

@@ -103,6 +103,7 @@
     flex: 1 1 0;
     display: flex;
     flex-wrap: nowrap;
+    justify-content: space-between;
 
     .name-and-action {
       flex: 1;
@@ -123,8 +124,8 @@
         object-fit: contain
       }
     }
+
     .timeago {
-      float: right;
       font-size: 12px;
     }
 

src/components/post_status_form/post_status_form.vue

@@ -118,6 +118,14 @@
   }
 }
 
+.post-status-form {
+  .visibility-tray {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+  }
+}
+
 .post-status-form, .login {
   .form-bottom {
     display: flex;