fix: UI - scrollable records in bulk view (#5143)

this PR adds min-height to fix the container height
argilla-io · Jul 3, 2024 · 4aa7387 · 4aa7387
1 parent 42f651d
commit 4aa7387
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 16 deletions.
diff --git a/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue b/argilla-frontend/components/base/base-resizable/HorizontalResizable.vue
@@ -174,6 +174,7 @@ $resizable-bar-width: $base-space;
   justify-content: space-between;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
   width: 100%;
   &.--h-resizing {
     user-select: none;

diff --git a/argilla-frontend/components/base/base-resizable/VerticalResizable.vue b/argilla-frontend/components/base/base-resizable/VerticalResizable.vue
@@ -112,6 +112,7 @@ $resizable-bar-width: $base-space;
   display: flex;
   justify-content: space-between;
   height: 100%;
+  min-height: 0;
   width: 100%;
   &.--v-resizing {
     user-select: none;

diff --git a/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span class="bulk__container">
     <LoadLine v-if="isSubmitting || isDraftSaving || isDiscarding" />
     <VerticalResizable
       class="wrapper"
@@ -500,9 +500,18 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    @include media("<desktop") {
+      height: 80vh;
+    }
   }
 }
 .bulk {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+  }
   &__records {
     position: relative;
     display: flex;

diff --git a/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue b/argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue
@@ -206,6 +206,9 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    @include media("<desktop") {
+      height: 80vh;
+    }
   }
 }
 .annotation-progress {

diff --git a/argilla-frontend/layouts/AnnotationPage.vue b/argilla-frontend/layouts/AnnotationPage.vue
@@ -39,6 +39,8 @@ $gap-width: $base-space * 2;
 .center-area {
   grid-area: center;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
   @include media("<desktop") {
     min-height: 0;
   }

diff --git a/argilla-frontend/pages/dataset/_id/annotation-mode/index.vue b/argilla-frontend/pages/dataset/_id/annotation-mode/index.vue
@@ -12,12 +12,8 @@
         />
       </template>
       <template v-slot:center>
-        <div class="center">
-          <PersistentStorageBanner />
-          <RecordFeedbackTaskAndQuestionnaire
-            :recordCriteria="recordCriteria"
-          />
-        </div>
+        <PersistentStorageBanner />
+        <RecordFeedbackTaskAndQuestionnaire :recordCriteria="recordCriteria" />
       </template>
     </AnnotationPage>
   </div>
@@ -42,12 +38,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.center {
-  height: 100%;
-  max-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-</style>