feat(calendar/dialog): increase height of create dialog

Author: nicholaschiang

components/calendar/index.tsx

@@ -339,7 +339,7 @@ export default function Calendar({
         )}
         {dialog && (
           <DialogSurface width={width} offset={offset}>
-            <DialogContent page={dialogPage}>
+            <DialogContent page={dialogPage} forceMinHeight={!editing.id}>
               <DisplayPage
                 people={editing.people}
                 loading={editLoading}

components/dialog/dialog.module.scss

@@ -4,6 +4,12 @@
   position: relative;
 }
 
+.pages.height .page:first-child {
+  min-height: 100%;
+  height: 80vh;
+  max-height: 600px;
+}
+
 .page {
   position: absolute;
   height: 100%;

components/dialog/index.tsx

@@ -6,6 +6,7 @@ import styles from './dialog.module.scss';
 interface DialogContentProps {
   page: number;
   children: JSX.Element[];
+  forceMinHeight?: boolean;
 }
 
 /**
@@ -26,6 +27,7 @@ interface DialogContentProps {
 export default function DialogContent({
   page,
   children,
+  forceMinHeight,
 }: DialogContentProps): JSX.Element {
   const springs = useSprings(
     children.length,
@@ -40,7 +42,7 @@ export default function DialogContent({
   );
 
   return (
-    <div className={styles.pages}>
+    <div className={cn(styles.pages, { [styles.height]: forceMinHeight })}>
       {children.map((child, idx) => (
         <animated.div
           key={idx}