From 25e1a0294380caa9214b2e4f62ae63a2386b2c97 Mon Sep 17 00:00:00 2001
From: Ricargame <78000356+Ricargame@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:49:30 -0400
Subject: [PATCH] fix: Responsive File Uploader (#2067)

---
 .../VFileImport/SelectTable/index.vue         | 91 ++++++++++++++++++-
 .../FormDefinition/VFileImport/index.vue      |  3 +-
 2 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/src/components/ADempiere/FormDefinition/VFileImport/SelectTable/index.vue b/src/components/ADempiere/FormDefinition/VFileImport/SelectTable/index.vue
index 630be112fb..ace7ca90e8 100644
--- a/src/components/ADempiere/FormDefinition/VFileImport/SelectTable/index.vue
+++ b/src/components/ADempiere/FormDefinition/VFileImport/SelectTable/index.vue
@@ -24,7 +24,7 @@
         id="panel-select-table"
         class="panel-select-table"
       >
-        <div slot="header" class="clearfix" style="padding: 0px; !important">
+        <div slot="header" class="clearfix" style="padding: 0px;">
           <h3
             v-if="isEmptyValue(currentTable)"
             style="text-align: center;margin: 0px;"
@@ -249,12 +249,93 @@ export default defineComponent({
     margin: 0px;
   }
 }
-.scroll-list-tables {
-  max-height: 75vh;
+:root {
+  --scroll-list-max-height: 55vh;
+  --scroll-current-max-height: 55vh;
+  --el-table-height-height:20vh;
 }
-.scroll-current-tables {
-  max-height: 65vh;
+
+@media screen and (min-height: 500px) {
+  :root{
+    --el-table-height-height:10vh;
+  }
+  .scroll-list-tables {
+    max-height: var(--scroll-list-max-height);
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
+  .el-table{
+    max-height: var(--el-table-height-height);
+  }
+}
+
+@media screen and (min-height: 720px) {
+  :root {
+    --scroll-list-max-height: 65vh;
+    --scroll-current-max-height: 50vh;
+    --el-table-height-height:10vh;
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
+  .el-table{
+    max-height: var(--el-table-height-height);
+  }
+}
+@media screen and (min-height: 800px) {
+  :root {
+    --scroll-list-max-height: 65vh;
+    --scroll-current-max-height: 50vh;
+    --el-table-height-height:15vh;
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
+  .el-table{
+    max-height: var(--el-table-height-height);
+  }
+}
+
+@media screen and (min-height: 1080px) {
+  :root {
+    --scroll-list-max-height: 75vh;
+    --scroll-current-max-height: 65vh;
+  }
+  .scroll-list-tables {
+    max-height: var(--scroll-list-max-height);
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
 }
+
+@media screen and (min-height: 1200px) {
+  :root {
+    --scroll-list-max-height: 85vh;
+    --scroll-current-max-height: 70vh;
+  }
+  .scroll-list-tables {
+    max-height: var(--scroll-list-max-height);
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
+}
+
+@media screen and (min-height: 1400px) {
+  :root {
+    --scroll-list-max-height: 100vh;
+    --scroll-current-max-height: 100vh;
+  }
+  .scroll-list-tables {
+    max-height: var(--scroll-list-max-height);
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
+}
+
 .custom-card-select {
   margin: 0.5px;
   cursor: pointer;
diff --git a/src/components/ADempiere/FormDefinition/VFileImport/index.vue b/src/components/ADempiere/FormDefinition/VFileImport/index.vue
index a2ec3c8077..ed47452671 100644
--- a/src/components/ADempiere/FormDefinition/VFileImport/index.vue
+++ b/src/components/ADempiere/FormDefinition/VFileImport/index.vue
@@ -29,7 +29,7 @@
       </el-steps>
     </div>
 
-    <div style="height: 90% !important;">
+    <div>
       <transition name="el-fade-in-linear">
         <selectTable
           v-if="currentSetp === 1"
@@ -359,7 +359,6 @@ export default defineComponent({
 
 <style scoped>
 .carousel-panel {
-  height: 100% !important;
   padding: 10px 0px;
 }
 .el-carousel__item {