Fix responsive layout breakpoint, replace mentions column with notifications

app/assets/javascripts/components/features/notifications/index.jsx

@@ -22,7 +22,8 @@ const Notifications = React.createClass({
 
   propTypes: {
     notifications: ImmutablePropTypes.list.isRequired,
-    dispatch: React.PropTypes.func.isRequired
+    dispatch: React.PropTypes.func.isRequired,
+    trackScroll: React.PropTypes.bool
   },
 
   mixins: [PureRenderMixin],
@@ -41,19 +42,31 @@ const Notifications = React.createClass({
   },
 
   render () {
-    const { intl, notifications } = this.props;
+    const { intl, notifications, trackScroll } = this.props;
 
-    return (
+    const scrollableArea = (
-      <Column icon='bell' heading={intl.formatMessage(messages.title)}>
-        <ScrollContainer scrollKey='notifications'>
       <div className='scrollable' onScroll={this.handleScroll}>
         <div>
           {notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
         </div>
       </div>
+    );
+
+    if (trackScroll) {
+      return (
+        <Column icon='bell' heading={intl.formatMessage(messages.title)}>
+          <ScrollContainer scrollKey='notifications'>
+            {scrollableArea}
           </ScrollContainer>
         </Column>
       );
+    } else {
+      return (
+        <Column icon='bell' heading={intl.formatMessage(messages.title)}>
+          {scrollableArea}
+        </Column>
+      );
+    }
   }
 
 });

app/assets/javascripts/components/features/ui/components/tabs_bar.jsx

@@ -31,7 +31,7 @@ const TabsBar = () => {
     <div style={outerStyle}>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> <FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/home'><i className='fa fa-fw fa-home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link>
-      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/mentions'><i className='fa fa-fw fa-at' /> <FormattedMessage id='tabs_bar.mentions' defaultMessage='Mentions' /></Link>
+      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/public'><i className='fa fa-fw fa-globe' /> <FormattedMessage id='tabs_bar.public' defaultMessage='Public' /></Link>
     </div>
   );

app/assets/javascripts/components/features/ui/index.jsx

@@ -8,6 +8,7 @@ import Compose                from '../compose';
 import MediaQuery from 'react-responsive';
 import TabsBar from './components/tabs_bar';
 import ModalContainer from './containers/modal_container';
+import Notifications from '../notifications';
 
 const UI = React.createClass({
 
@@ -26,11 +27,11 @@ const UI = React.createClass({
           {this.props.children}
         </MediaQuery>
 
-        <MediaQuery minWidth={layoutBreakpoint}>
+        <MediaQuery minWidth={layoutBreakpoint + 1}>
           <ColumnsArea>
             <Compose />
             <HomeTimeline trackScroll={false} />
-            <MentionsTimeline trackScroll={false} />
+            <Notifications trackScroll={false} />
             {this.props.children}
           </ColumnsArea>
         </MediaQuery>