Fix the max height of the calendar popovers

app/internal_packages/main-calendar/lib/core/calendar-event-popover.jsx

@@ -266,18 +266,16 @@ export default class CalendarEventPopover extends React.Component {
         </div>
         <div className="location">{location}</div>
         <div className="section">{this.renderTime()}</div>
-        <div className="section">
+        <ScrollRegion className="section invitees">
           <div className="label">Invitees: </div>
-          {attendees.map((a, idx) => <div key={idx}> {a.cn} </div>)}
-        </div>
-        <div className="section">
+          <div>{attendees.map((a, idx) => <div key={idx}> {a.cn} </div>)}</div>
+        </ScrollRegion>
+        <ScrollRegion className="section description">
           <div className="description">
             <div className="label">Notes: </div>
-            <ScrollRegion>
-              <div>{notes}</div>
-            </ScrollRegion>
+            <div>{notes}</div>
           </div>
-        </div>
+        </ScrollRegion>
       </div>
     );
   }

app/internal_packages/main-calendar/lib/main.jsx

@@ -1,66 +1,29 @@
-import { exec } from 'child_process';
-import fs from 'fs';
-import path from 'path';
+import React from 'react';
 import { WorkspaceStore, ComponentRegistry } from 'mailspring-exports';
 import CalendarWrapper from './calendar-wrapper';
 import QuickEventButton from './quick-event-button';
 
-//
-// function resolveHelperPath(callback) {
-//   const resourcesPath = AppEnv.getLoadSettings().resourcePath;
-//   let pathToCalendarApp = path.join(resourcesPath, '..', 'Nylas Calendar.app');
-//
-//   fs.exists(pathToCalendarApp, (exists) => {
-//     if (exists) {
-//       callback(pathToCalendarApp);
-//       return;
-//     }
-//
-//     pathToCalendarApp = path.join(resourcesPath, 'build', 'resources', 'mac', 'Nylas Calendar.app');
-//     fs.exists(pathToCalendarApp, (fallbackExists) => {
-//       if (fallbackExists) {
-//         callback(pathToCalendarApp);
-//         return;
-//       }
-//       callback(null);
-//     });
-//   });
-// }
+const Notice = () => (
+  <div className="preview-notice">
+    Calendar is launching later this year! This preview is read-only and only supports Google
+    calendar.
+  </div>
+);
+Notice.displayName = 'Notice';
 
 export function activate() {
-  // if (process.platform === 'darwin') {
-  //   resolveHelperPath((helperPath) => {
-  //     if (!helperPath) {
-  //       return;
-  //     }
-
-  //     exec(`chmod +x "${helperPath}/Contents/MacOS/Nylas Calendar"`, () => {
-  //       exec(`open "${helperPath}"`);
-  //     });
-
-  //     if (!AppEnv.config.get('addedToDockCalendar')) {
-  //       exec(`defaults write com.apple.dock persistent-apps -array-add "<dict><key>tile-data</key><dict><key>file-data</key><dict><key>_CFURLString</key><string>${helperPath}/</string><key>_CFURLStringType</key><integer>0</integer></dict></dict></dict>"`, () => {
-  //         AppEnv.config.set('addedToDockCalendar', true);
-  //         exec(`killall Dock`);
-  //       });
-  //     }
-  //   });
-
-  //   AppEnv.onBeforeUnload(() => {
-  //     exec('killall "Nylas Calendar"');
-  //     return true;
-  //   });
-  // }
-
   ComponentRegistry.register(CalendarWrapper, {
     location: WorkspaceStore.Location.Center,
   });
-  // ComponentRegistry.register(QuickEventButton, {
-  //   location: WorkspaceStore.Location.Center.Toolbar,
-  // });
+  ComponentRegistry.register(Notice, {
+    location: WorkspaceStore.Sheet.Main.Header,
+  });
+  ComponentRegistry.register(QuickEventButton, {
+    location: WorkspaceStore.Location.Center.Toolbar,
+  });
 }
 
 export function deactivate() {
   ComponentRegistry.unregister(CalendarWrapper);
-  // ComponentRegistry.unregister(QuickEventButton);
+  ComponentRegistry.unregister(QuickEventButton);
 }

app/internal_packages/main-calendar/styles/main-calendar.less

@@ -4,24 +4,22 @@
 
 .main-calendar {
   height: 100%;
-
-  .event-grid-legend {
-    border-left: 1px solid @border-color-divider;
-  }
 }
 
-.calendar-event-popover {
+.fixed-popover .calendar-event-popover {
   color: fadeout(@text-color, 20%);
   background-color: @background-primary;
   display: flex;
   flex-direction: column;
   font-size: @font-size-small;
+  max-height: 95vh;
   width: 300px;
 
   .location {
     color: @text-color-very-subtle;
     padding: @padding-base-vertical @padding-base-horizontal;
     word-wrap: break-word;
+    flex-shrink: 0;
   }
   .title-wrapper {
     color: @text-color-inverse;
@@ -31,16 +29,30 @@
     border-top-left-radius: @border-radius-base;
     border-top-right-radius: @border-radius-base;
     padding: @padding-base-vertical @padding-base-horizontal;
+    align-items: center;
+    flex-shrink: 0;
+    .title {
+      padding-right: @padding-base-vertical;
+    }
   }
   .edit-icon {
     background-color: @text-color-inverse;
     cursor: pointer;
   }
-  .description .scroll-region-content {
-    max-height: 300px;
+
+  .invitees .scroll-region-content {
+    max-height: 160px;
     word-wrap: break-word;
     position: relative;
   }
+  .description {
+    white-space: pre-line;
+    word-wrap: break-word;
+  }
+  .description .scroll-region-content {
+    max-height: 250px;
+    position: relative;
+  }
   .label {
     color: @text-color-very-subtle;
   }
@@ -65,3 +77,15 @@
 .quick-event-popover {
   width: 250px;
 }
+
+.preview-notice {
+  display: block;
+  box-sizing: border-box;
+  -webkit-print-color-adjust: exact;
+  padding: 8px 12px;
+  border-bottom: 1px solid rgb(235, 224, 204);
+  color: rgb(169, 136, 66);
+  background-color: rgb(242, 235, 222);
+  white-space: nowrap;
+  overflow: hidden;
+}

app/internal_packages/main-calendar/styles/nylas-calendar.less

@@ -20,8 +20,8 @@ body.platform-win32 {
     border-right: 1px solid @border-color-divider;
     color: @text-color-subtle;
     .calendar-toggles-wrap {
-      padding: 20px;
-      padding-top: 6px;
+      padding: 12px;
+      padding-top: 0px;
     }
     .colored-checkbox {
       position: relative;