fix: misc responsive improvements, date clipping in sidebar (#165), express-fileupload schema validation (#180)

* fix: misc responsive improvements
* fix: date clipping in sidebar
* fix: revises popup
* fix: admin _verified field not displaying proper field value
* fix: properly typed express-fileupload config options

src/admin/components/elements/DatePicker/DatePicker.tsx

@@ -58,10 +58,19 @@ const DateTime: React.FC<Props> = (props) => {
 
   return (
     <div className={classes}>
-      <div className={`${baseClass}__input-wrapper`}>
-        <DatePicker {...dateTimePickerProps} />
+      <div className={`${baseClass}__icon-wrap`}>
         <CalendarIcon />
       </div>
+      <div className={`${baseClass}__input-wrapper`}>
+        <DatePicker
+          {...dateTimePickerProps}
+          popperModifiers={{
+            preventOverflow: {
+              enabled: true,
+            },
+          }}
+        />
+      </div>
     </div>
   );
 };

src/admin/components/elements/DatePicker/index.scss

@@ -8,6 +8,21 @@ $cal-icon-width: 18px;
     width: 120px;
   }
 
+  &__icon-wrap {
+    position: relative;
+    z-index: 2;
+
+    .icon {
+      pointer-events: none;
+      position: absolute;
+      right: base(.75);
+      top: base(.625);
+      width: $cal-icon-width;
+      height: auto;
+      @include color-svg($color-dark-gray);
+    }
+  }
+
   &__appearance--timeOnly {
     .react-datepicker {
       width: 100%;
@@ -35,21 +50,6 @@ $cal-icon-width: 18px;
     }
   }
 
-  &__input-wrapper {
-    position: relative;
-
-    .icon {
-      pointer-events: none;
-      position: absolute;
-      right: base(.75);
-      top: 50%;
-      transform: translateY(-50%);
-      width: $cal-icon-width;
-      height: auto;
-      @include color-svg($color-dark-gray);
-    }
-  }
-
   .react-datepicker-wrapper {
     display: block;
   }

src/admin/components/elements/Localizer/index.tsx

@@ -22,7 +22,7 @@ const Localizer: React.FC<Props> = () => {
     return (
       <div className={baseClass}>
         <Popup
-          align="left"
+          horizontalAlign="left"
           button={locale}
           render={({ close }) => (
             <div>

src/admin/components/elements/Popup/index.scss

@@ -46,7 +46,7 @@
       @include shadow-sm;
     }
 
-    &.popup--align-left {
+    &.popup--h-align-left {
       .popup__content {
         left: - base(.5);
 
@@ -175,6 +175,7 @@
         top: unset;
         bottom: calc(100% - 1px);
         border-top-color: transparent !important;
+        border-bottom-color: white;
       }
     }
 

src/admin/components/elements/Popup/index.tsx

@@ -13,7 +13,6 @@ const baseClass = 'popup';
 const Popup: React.FC<Props> = (props) => {
   const {
     render,
-    align = 'center',
     size = 'small',
     color = 'light',
     button,
@@ -88,7 +87,6 @@ const Popup: React.FC<Props> = (props) => {
 
   const classes = [
     baseClass,
-    `${baseClass}--align-${align}`,
     `${baseClass}--size-${size}`,
     `${baseClass}--color-${color}`,
     `${baseClass}--v-align-${verticalAlign}`,

src/admin/components/elements/Popup/types.ts

@@ -1,7 +1,6 @@
 export type Props = {
     render?: (any) => void,
     children?: React.ReactNode,
-    align?: 'left' | 'center' | 'right',
     horizontalAlign?: 'left' | 'center' | 'right',
     size?: 'small' | 'large' | 'wide',
     color?: 'light' | 'dark',