Chats: improve toggle surface area

app/soapbox/features/chats/components/chat_panes.js

@@ -79,11 +79,9 @@ class ChatPanes extends ImmutablePureComponent {
       <div key={i} className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }}>
         <div className='pane__header'>
           <Avatar account={account} size={18} />
-          <div className='display-name__account'>
-            <a onClick={this.handleChatToggle(chat.get('id'))}>
-              @{acctFull(account)}
-            </a>
-          </div>
+          <button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>
+            @{acctFull(account)}
+          </button>
           <div className='pane__close'>
             <IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
           </div>
@@ -113,9 +111,9 @@ class ChatPanes extends ImmutablePureComponent {
       <div className='chat-panes'>
         <div className={`pane pane--main pane--${mainWindow}`}>
           <div className='pane__header'>
-            <a onClick={this.handleMainWindowToggle}>
+            <button className='pane__title' onClick={this.handleMainWindowToggle}>
               <FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
-            </a>
+            </button>
           </div>
           <div className='pane__content'>
             <ChatList onClickChat={this.handleClickChat} />

app/styles/chats.scss

@@ -13,6 +13,10 @@
 
   &--main {
     height: calc(100vh - 70px);
+
+    .pane__header {
+      font-size: 16px;
+    }
   }
 
   &--minimized {
@@ -23,8 +27,7 @@
     box-sizing: border-box;
     background: var(--brand-color);
     color: #fff;
-    padding: 6px 10px;
-    font-size: 16px;
+    padding: 0 10px;
     font-weight: bold;
     border-radius: 6px 6px 0 0;
     display: flex;
@@ -35,10 +38,19 @@
       margin-right: 7px;
     }
 
-    .display-name__account {
+    .pane__title {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      width: 100%;
+      height: 100%;
+      background: transparent;
+      border: 0;
+      padding: 0;
+      color: #fff;
+      font-weight: bold;
+      text-align: left;
+      font-size: 14px;
     }
 
     .icon-button {