Chats: mobile styling

app/soapbox/features/ui/index.js

@@ -158,8 +158,6 @@ const LAYOUT = {
   },
 };
 
-const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started|^\/chats/);
-
 class SwitchingColumnsArea extends React.PureComponent {
 
   static propTypes = {
@@ -577,6 +575,16 @@ class UI extends React.PureComponent {
     this.props.dispatch(openModal('COMPOSE'));
   }
 
+  shouldHideFAB = () => {
+    const path = this.context.router.history.location.pathname;
+    return path.match(/^\/posts\/|^\/search|^\/getting-started|^\/chats/);
+  }
+
+  isChatRoomLocation = () => {
+    const path = this.context.router.history.location.pathname;
+    return path.match(/^\/chats\/(.*)/);
+  }
+
   render() {
     const { streamingUrl } = this.props;
     const { draggingOver, mobile } = this.state;
@@ -602,11 +610,31 @@ class UI extends React.PureComponent {
       goToRequests: this.handleHotkeyGoToRequests,
     } : {};
 
-    const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' fixedWidth /></button>;
+    const fabElem = (
+      <button
+        key='floating-action-button'
+        onClick={this.handleOpenComposeModal}
+        className='floating-action-button'
+        aria-label={intl.formatMessage(messages.publish)}
+      >
+        <Icon id='pencil' fixedWidth />
+      </button>
+    );
+
+    const floatingActionButton = this.shouldHideFAB() ? null : fabElem;
+
+    const classnames = classNames('ui', {
+      'is-composing': isComposing,
+      'ui--chatroom': this.isChatRoomLocation(),
+    });
+
+    const style = {
+      pointerEvents: dropdownMenuIsOpen ? 'none' : null,
+    };
 
     return (
       <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
-        <div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
+        <div className={classnames} ref={this.setRef} style={style}>
           <TabsBar />
           <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
             {children}

app/soapbox/reducers/accounts.js

@@ -3,7 +3,7 @@ import {
   ACCOUNTS_IMPORT,
   ACCOUNT_FETCH_FAIL_FOR_USERNAME_LOOKUP,
 } from '../actions/importer';
-import { CHATS_FETCH_SUCCESS } from 'soapbox/actions/chats';
+import { CHATS_FETCH_SUCCESS, CHAT_FETCH_SUCCESS } from 'soapbox/actions/chats';
 import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
 import { normalizeAccount as normalizeAccount2 } from 'soapbox/actions/importer/normalizer';
 import { Map as ImmutableMap, fromJS } from 'immutable';
@@ -48,6 +48,7 @@ export default function accounts(state = initialState, action) {
     }));
   case CHATS_FETCH_SUCCESS:
     return importAccountsFromChats(state, action.chats);
+  case CHAT_FETCH_SUCCESS:
   case STREAMING_CHAT_UPDATE:
     return importAccountsFromChats(state, [action.chat]);
   default:

app/styles/chats.scss

@@ -176,9 +176,24 @@
   }
 }
 
-.column .chat-box {
+.ui--chatroom {
-  max-height: calc(100vh - 125px);
+  padding-bottom: 0;
-  overflow: hidden;
+
-  display: flex;
+  .columns-area__panels__main .columns-area {
-  flex-direction: column;
+    height: calc(100vh - 100px);
+    box-sizing: border-box;
+    overflow: hidden;
+
+    @media(max-width: 630px) {
+      height: calc(100vh - 50px);
+    }
+  }
+
+  .page {
+    .chat-box {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+  }
 }