wip: add responsive styles for planning page

src/components/DrawerRouterContainer.jsx

@@ -1,6 +1,5 @@
 
 import React from 'react';
-import * as PropTypes from 'prop-types';
 
 import { withRouter } from 'react-router-dom';
 

src/pages/Dashboard.jsx

@@ -206,7 +206,7 @@ const Dashboard = () => {
     );
 
     return (
-        <div id="Dashboard" className="main-content">
+        <div id="Dashboard" className="dashboard-page main-content">
             <div className="card-container grid">
                 <h3 className="card-title">Team Efficiency</h3>
                 <div className="card-buttons">

src/pages/Planning.jsx

@@ -6,12 +6,12 @@ import { teams } from './../resources/teams';
 
 const Planning = () => {
     return (
-        <div id="Planning" className="main-content">
+        <div id="Planning" className="planning-page main-content">
             <div className="card-container grid">
                 <h3 className="card-title">Team Calendar</h3>
                 <span></span>
                 <span></span>
-                <div className="card-component">
+                <div className="card-component" style={{ maxWidth: window.innerWidth - 20, margin: '0 auto' }} >
                     <Scheduler
                         data={orders}
                         modelFields={ordersModelFields}

src/styles/_common.scss

@@ -252,8 +252,26 @@ li {
     }
 }
 
+// Dashboard page
+.dashboard-page {
+    .card-container:last-of-type {
+        padding-top: 0;
+    }
+}
+
+@media (min-width: 768px) {
+    .dashboard-page {
+        .card-container:last-of-type {
+            padding-top: 30px;
+        }
+    }
+}
+
 // Profile page
 .profile-page {
+    .card-container {
+        text-align: left;
+    }
 
     .k-form .k-form-field {
         display: block;