remove empty state margins and center the empty state vertically

Author: stuartromanek

modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue

@@ -872,7 +872,6 @@ export default {
   justify-content: center;
   width: 100%;
   height: 100%;
-  margin-top: 130px;
 }
 
 .apos-media-manager__sidebar {

modules/@apostrophecms/modal/ui/apos/components/AposModalBody.vue

@@ -62,6 +62,12 @@ export default {
   }
 }
 
+.apos-modal__body-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .apos-modal__body--flex {
   display: flex;
   flex-direction: column;
@@ -85,6 +91,10 @@ export default {
   padding: 20px;
 }
 
+.apos-modal__body-main {
+  height: 100%;
+}
+
 // TODO responsibilty of this setting might change
 .apos-modal__body-main .apos-field {
   margin-bottom: 40px;

modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue

@@ -584,7 +584,6 @@ export default {
     justify-content: center;
     width: 100%;
     height: 100%;
-    margin-top: 130px;
   }
 
   .apos-pieces-manager__relationship__rail {

modules/@apostrophecms/ui/ui/apos/components/AposEmptyState.vue

@@ -8,7 +8,7 @@
         :icon="emptyState.icon"
         class="apos-empty-state__indicator"
         icon-color="var(--a-base-3)"
-        :icon-size="32"
+        :icon-size="48"
       />
     </div>
     <p
@@ -47,18 +47,23 @@ export default {
   }
 
   .apos-empty-state__icon {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
   }
 
   .apos-empty-state__title {
     @include type-title;
 
     & {
-      margin: 0 0 10px;
+      margin: 0;
     }
   }
 
   .apos-empty-state__message {
     @include type-large;
+
+    & {
+      text-align: center;
+      margin-top: 5px;
+    }
   }
 </style>