Adjusted settings mobile behavior. Fixed tsc error.

frontend/client/components/Settings/Account.tsx

@@ -132,6 +132,6 @@ class AccountSettings extends React.Component<Props, State> {
 
 const FormWrappedAccountSettings = Form.create()(AccountSettings);
 
-export default connect<StateProps, {}, FormComponentProps, AppState>(state => ({
+export default connect<StateProps, {}, {}, AppState>(state => ({
   email: state.auth.user ? state.auth.user.emailAddress || '' : '',
 }))(FormWrappedAccountSettings);

frontend/client/components/Settings/index.less

@@ -5,4 +5,13 @@
   .ant-tabs-content {
     min-height: 50vh;
   }
+
+  // Only top-style at mobile
+  .ant-tabs-top {
+    margin: -2.5rem -2.5rem 0;
+
+    .ant-tabs-tabpane {
+      padding: 0 2.5rem;
+    }
+  }
 }

frontend/client/components/Settings/index.tsx

@@ -16,27 +16,53 @@ interface StateProps {
 
 type Props = StateProps;
 
-class Settings extends React.Component<Props> {
+interface State {
+  tabPosition: 'left' | 'top';
+}
+
+class Settings extends React.Component<Props, State> {
+  state: State = {
+    tabPosition: 'left',
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
   render() {
     const { authUser } = this.props;
     if (!authUser) return null;
+    const { tabPosition } = this.state;
 
     return (
       <div className="Settings">
-        <LinkableTabs defaultActiveKey="account" tabPosition="left">
+        <LinkableTabs defaultActiveKey="account" tabPosition={tabPosition}>
           <TabPane tab="Account" key="account">
             <Account />
           </TabPane>
-          <TabPane tab="Change Password" key="password">
-            <ChangePassword />
-          </TabPane>
           <TabPane tab="Notifications" key="emails">
             <EmailSubscriptions />
           </TabPane>
+          <TabPane tab="Change Password" key="password">
+            <ChangePassword />
+          </TabPane>
         </LinkableTabs>
       </div>
     );
   }
+
+  private handleResize = () => {
+    const { tabPosition } = this.state;
+    if (tabPosition === 'left' && window.innerWidth < 460) {
+      this.setState({ tabPosition: 'top' });
+    } else if (tabPosition === 'top' && window.innerWidth >= 460) {
+      this.setState({ tabPosition: 'left' });
+    }
+  };
 }
 
 const withConnect = connect<StateProps, {}, {}, AppState>(state => ({