Fix assessments tab height

Author: AlexVelezLl

contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue

@@ -96,7 +96,10 @@
             </ResizableNavigationDrawer>
 
             <!-- Main editing area -->
-            <VContent>
+            <VContent
+              class="edit-modal-content"
+              :class="{ 'has-bottom-bar': showBottomBar }"
+            >
               <VLayout
                 v-if="loadError"
                 align-center
@@ -126,7 +129,7 @@
           </template>
         </Uploader>
       </VCard>
-      <BottomBar v-if="!loading && !loadError && !showFileUploadDefault">
+      <BottomBar v-if="showBottomBar">
         <FileStorage
           v-if="showStorage"
           class="mx-2"
@@ -311,6 +314,9 @@
       showFileUploadDefault() {
         return this.uploadMode && !this.nodeIds.length;
       },
+      showBottomBar() {
+        return !this.loading && !this.loadError && !this.showFileUploadDefault;
+      },
       nodeIds() {
         return (this.detailNodeIds && this.detailNodeIds.split(',')) || [];
       },
@@ -673,7 +679,6 @@
   }
 
   ::v-deep .v-content__wrap {
-    max-height: calc(100vh - 128px);
     overflow-y: auto;
   }
 
@@ -690,4 +695,13 @@
     z-index: 5 !important;
   }
 
+  .edit-modal-content {
+    height: 100%;
+
+    &.has-bottom-bar {
+      // Reserve room for the fixed BottomBar,
+      padding-bottom: 64px !important;
+    }
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue

@@ -24,8 +24,11 @@
         </VFlex>
       </VLayout>
     </VContainer>
-    <VLayout v-else>
-      <VFlex grow>
+    <div
+      v-else
+      class="edit-view-layout-wrapper"
+    >
+      <div class="edit-view-layout">
         <ToolBar
           v-if="showTabs"
           :flat="!tabsElevated"
@@ -116,6 +119,7 @@
         </ToolBar>
         <VContainer
           fluid
+          class="tab-content"
           :style="questionsTabStyles"
         >
           <VTabsItems v-model="currentTab">
@@ -174,8 +178,8 @@
             </VTabItem>
           </VTabsItems>
         </VContainer>
-      </VFlex>
-    </VLayout>
+      </div>
+    </div>
   </VContainer>
 
 </template>
@@ -441,10 +445,26 @@
     z-index: 5;
   }
 
+  .edit-view-layout-wrapper {
+    height: 100%;
+  }
+
+  .edit-view-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
   .container {
     width: unset;
   }
 
+  .tab-content {
+    // Override Vuetify's default margin for VContainer, which is not needed in this layout.
+    margin-right: 0;
+    margin-left: 0;
+  }
+
   .v-alert {
     padding: 10px;
     margin: 15px;
@@ -473,6 +493,7 @@
 
   .wrapper {
     min-width: 100%;
+    height: 100%;
     max-height: inherit;
     overflow: auto;
   }

contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div>
+  <div class="uploader-container">
     <slot
       :openFileDialog="openFileDialog"
       :handleFiles="handleFiles"
@@ -283,6 +283,10 @@
 
 <style lang="scss" scoped>
 
+  .uploader-container {
+    height: 100%;
+  }
+
   .storage-alert {
     font-size: 12pt;
   }