From 6756c43e4e51e12cd12ce5e84380c84497e6ed90 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Wed, 3 Jul 2024 17:23:10 +0300
Subject: [PATCH] Fixed FileDropArea in Drive (#5993)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
 .../src/components/FileDropArea.svelte        | 29 ++++++++-----------
 .../src/components/FolderBrowser.svelte       |  8 ++---
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/plugins/drive-resources/src/components/FileDropArea.svelte b/plugins/drive-resources/src/components/FileDropArea.svelte
index 1fcfcad533..6861c45314 100644
--- a/plugins/drive-resources/src/components/FileDropArea.svelte
+++ b/plugins/drive-resources/src/components/FileDropArea.svelte
@@ -71,34 +71,29 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="dropzone h-full"
+  class="dropzone flex-col w-full h-full"
+  class:dragover
   on:dragenter={handleDragEnter}
   on:dragleave={handleDragLeave}
   on:dragover|preventDefault={handleDragOver}
   on:drop={handleDrop}
 >
-  {#if dragover}
-    <div class="dropzone-overlay" />
-  {/if}
-
   <slot />
 </div>
 
 <style lang="scss">
   .dropzone {
     position: relative;
-  }
 
-  .dropzone-overlay {
-    pointer-events: none;
-
-    z-index: 1;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--primary-button-transparent);
-    border: 2px dashed var(--primary-button-outline);
+    &::after {
+      position: absolute;
+      inset: 0;
+      background-color: var(--primary-button-transparent);
+      border: 2px dashed var(--primary-button-outline);
+      pointer-events: none;
+    }
+    &.dragover::after {
+      content: '';
+    }
   }
 </style>
diff --git a/plugins/drive-resources/src/components/FolderBrowser.svelte b/plugins/drive-resources/src/components/FolderBrowser.svelte
index ae44c930e6..77c71b61b9 100644
--- a/plugins/drive-resources/src/components/FolderBrowser.svelte
+++ b/plugins/drive-resources/src/components/FolderBrowser.svelte
@@ -69,11 +69,11 @@
       <FilterBar {_class} {space} query={searchQuery} {viewOptions} on:change={(e) => (resultQuery = e.detail)} />
       <div class="popupPanel rowContent" on:contextmenu>
         {#if viewlet}
-          <Scroller horizontal={true}>
-            <FileDropArea {space} {parent} canDrop={() => !readonly}>
+          <FileDropArea {space} {parent} canDrop={() => !readonly}>
+            <Scroller horizontal={true}>
               <ViewletContentView {_class} {viewlet} query={resultQuery} {space} {viewOptions} />
-            </FileDropArea>
-          </Scroller>
+            </Scroller>
+          </FileDropArea>
         {/if}
       </div>
     {/if}