fix chats button alignment

2 files changed, 7 insertions, 8 deletions

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 430319d9..8b745e86 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -47,7 +47,6 @@
   }
 
   .chat-view-heading {
-    align-items: center;
     justify-content: space-between;
     display: flex;
     z-index: 2;
@@ -56,11 +55,11 @@
   }
 
   .go-back-button {
-    cursor: pointer;
-    width: 28px;
     text-align: center;
-    padding: 0.6em;
-    margin: -0.6em 0.6em -0.6em -0.6em;
+    padding: 0 0.7em;
+    line-height: 100%;
+    height: 100%;
+    align-self: stretch;
   }
 
   .jump-to-bottom-button {
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index d909bed9..31eecbc0 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -9,15 +9,15 @@
           ref="header"
           class="panel-heading -sticky chat-view-heading mobile-hidden"
         >
-          <a
-            class="go-back-button"
+          <button
+            class="button-unstyled go-back-button"
             @click="goBack"
           >
             <FAIcon
               size="lg"
               icon="chevron-left"
             />
-          </a>
+          </button>
           <div class="title text-center">
             <ChatTitle
               :user="recipient"