Revert "Remove main-container"

This reverts commit b402756.

Author: Emmanouil Konstantinidis

src/js/components/all-read.js

@@ -24,7 +24,7 @@ export default class AllRead extends React.Component {
     const emoji = _.sample(constants.ALLREAD_EMOJIS);
 
     return (
-      <div className="container-fluid notifications all-read">
+      <div className="container-fluid main-container notifications all-read">
         <h2 className="typed-text">
           <span className="typed" />
           <span className="cursor">|</span>

src/js/components/login.js

@@ -73,7 +73,7 @@ export class LoginPage extends React.Component {
 
   render() {
     return (
-      <div className="container-fluid login">
+      <div className="container-fluid main-container login">
         <div className="row">
           <div className="col-xs-offset-2 col-xs-8">
             <img className="img-responsive logo" src="images/gitify-logo-outline-light.png" />

src/js/components/notifications.js

@@ -27,7 +27,7 @@ export class NotificationsPage extends React.Component {
   }
 
   render() {
-    const wrapperClass = 'container-fluid notifications';
+    const wrapperClass = 'container-fluid main-container notifications';
     const notificationsEmpty = _.isEmpty(this.props.notifications);
 
     if (this.props.failed) {

src/js/components/oops.js

@@ -9,7 +9,7 @@ export default class Oops extends React.Component {
     const emoji = _.sample(constants.ERROR_EMOJIS);
 
     return (
-      <div className="container-fluid notifications errored">
+      <div className="container-fluid main-container notifications errored">
         <h3>Oops something went wrong.</h3>
         <h4>Couldn't get your notifications.</h4>
         <h1 className="emoji">{emojify(emoji, {output: 'unicode'})}</h1>

src/js/components/settings.js

@@ -30,7 +30,7 @@ export class SettingsPage extends React.Component {
     const settings = this.props.settings;
 
     return (
-      <div className="container-fluid settings">
+      <div className="container-fluid main-container settings">
         <div className="row">
           <div className="col-xs-8">Show only participating</div>
           <div className="col-xs-4">

src/scss/app.scss

@@ -105,6 +105,19 @@ html {
   overflow: hidden;
 }
 
+.main-container {
+  position: absolute;
+  top: $navbar-height;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+}
+
+.search-bar + .main-container {
+  top: $navbar-height + $navbar-height;
+}
+
 .btn {
   @include border-radius(0);
   border: 0;