From ab3ebbff058c4b8d9dbf198e68b0f3620878210e Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Mon, 18 Dec 2017 10:39:08 +0000
Subject: [PATCH] Fix the calendar widget on mobile.

---
 src/components/Calendar.css | 9 +++++++++
 src/components/Calendar.tsx | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Calendar.css

diff --git a/src/components/Calendar.css b/src/components/Calendar.css
new file mode 100644
index 0000000..88bea0e
--- /dev/null
+++ b/src/components/Calendar.css
@@ -0,0 +1,9 @@
+/* Hack the layout on mobile. */
+@media (max-width: 767px) {
+  .rbc-toolbar {
+    flex-direction: column;
+  }
+  .rbc-toolbar-label {
+    margin: 10px 0;
+  }
+}
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index 23c3b09..0e69a6e 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -6,6 +6,8 @@ import 'moment/locale/en-gb';
 
 import { EventType } from '../pim-types';
 
+import './Calendar.css';
+
 moment.locale('en-gb');
 BigCalendar.momentLocalizer(moment);
 
@@ -45,7 +47,7 @@ class Calendar extends React.PureComponent {
 
   render() {
     return (
-      <div style={{width: '100%', height: 500, padding: 10}}>
+      <div style={{width: '100%', height: 500}}>
         <BigCalendar
           events={this.props.entries}
           onSelectEvent={this.props.onItemClick as any}