From 95e2aea1c2b204bba3b99aaf4dd7c3b91c61bb41 Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Sat, 14 Feb 2026 20:55:20 +0100
Subject: [PATCH] fix(platform): fix drag leave flicker, upload overlay, and
 minor UI issues

Fix file upload drop zone drag leave firing when hovering over children.
Move upload overlay inside drop zone for correct positioning. Remove
unnecessary URL.revokeObjectURL cleanup in preview step. Fix navigation
overflow and org settings input wrapper class.
---
 .../platform/app/components/ui/forms/file-upload.tsx   |  8 +++++++-
 .../app/components/ui/navigation/navigation.tsx        |  2 +-
 .../integration-upload/steps/preview-step.tsx          | 10 +---------
 .../integration-upload/steps/upload-step.tsx           |  7 +++++--
 .../components/organization-settings-client.tsx        |  2 +-
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/services/platform/app/components/ui/forms/file-upload.tsx b/services/platform/app/components/ui/forms/file-upload.tsx
index cfe916d4d..7f4585772 100644
--- a/services/platform/app/components/ui/forms/file-upload.tsx
+++ b/services/platform/app/components/ui/forms/file-upload.tsx
@@ -92,7 +92,13 @@ function DropZone({
     (e: React.DragEvent) => {
       e.preventDefault();
       e.stopPropagation();
-      setIsDragOver(false);
+      const { relatedTarget } = e;
+      if (
+        !(relatedTarget instanceof Node) ||
+        !e.currentTarget.contains(relatedTarget)
+      ) {
+        setIsDragOver(false);
+      }
     },
     [setIsDragOver],
   );
diff --git a/services/platform/app/components/ui/navigation/navigation.tsx b/services/platform/app/components/ui/navigation/navigation.tsx
index 5b491ac8d..8fd9d7135 100644
--- a/services/platform/app/components/ui/navigation/navigation.tsx
+++ b/services/platform/app/components/ui/navigation/navigation.tsx
@@ -139,7 +139,7 @@ export function Navigation({ organizationId, role }: NavigationProps) {
           <TaleLogo />
         </Link>
       </div>
-      <div className="min-h-0 flex-1 overflow-y-auto py-4">
+      <div className="mx-1 min-h-0 flex-1 py-4">
         <NavigationMenuList className="block space-y-2 space-x-0">
           {navigationItems.map((item) => (
             <NavigationItem key={item.href} item={item} role={role} />
diff --git a/services/platform/app/features/settings/integrations/components/integration-upload/steps/preview-step.tsx b/services/platform/app/features/settings/integrations/components/integration-upload/steps/preview-step.tsx
index d5f6e43c9..5687640ed 100644
--- a/services/platform/app/features/settings/integrations/components/integration-upload/steps/preview-step.tsx
+++ b/services/platform/app/features/settings/integrations/components/integration-upload/steps/preview-step.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Code, Database, Key, Globe, Pencil, Puzzle, Zap } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 
 import { Image } from '@/app/components/ui/data-display/image';
 import { Badge } from '@/app/components/ui/feedback/badge';
@@ -37,14 +37,6 @@ export function PreviewStep({ parsedPackage, onIconChange }: PreviewStepProps) {
     [iconFile],
   );
 
-  useEffect(() => {
-    return () => {
-      if (iconPreviewUrl) {
-        URL.revokeObjectURL(iconPreviewUrl);
-      }
-    };
-  }, [iconPreviewUrl]);
-
   const handleIconUpload = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const file = e.target.files?.[0];
diff --git a/services/platform/app/features/settings/integrations/components/integration-upload/steps/upload-step.tsx b/services/platform/app/features/settings/integrations/components/integration-upload/steps/upload-step.tsx
index 410b48a48..a6e240ac6 100644
--- a/services/platform/app/features/settings/integrations/components/integration-upload/steps/upload-step.tsx
+++ b/services/platform/app/features/settings/integrations/components/integration-upload/steps/upload-step.tsx
@@ -59,10 +59,14 @@ export function UploadStep({ onPackageParsed }: UploadStepProps) {
           inputId="integration-package-upload"
           aria-label={t('integrations.upload.dropZoneLabel')}
           className={cn(
-            'border-border hover:border-primary/50 flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-8 transition-colors',
+            'border-border hover:border-primary/50 relative flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-8 transition-colors',
             isParsing && 'pointer-events-none opacity-50',
           )}
         >
+          <FileUpload.Overlay
+            label={t('integrations.upload.dropHere')}
+            className="rounded-lg"
+          />
           <Upload className="text-muted-foreground size-8" />
           <Stack gap={1} className="text-center">
             <p className="text-sm font-medium">
@@ -75,7 +79,6 @@ export function UploadStep({ onPackageParsed }: UploadStepProps) {
             </p>
           </Stack>
         </FileUpload.DropZone>
-        <FileUpload.Overlay label={t('integrations.upload.dropHere')} />
       </FileUpload.Root>
 
       {error && (
diff --git a/services/platform/app/features/settings/organization/components/organization-settings-client.tsx b/services/platform/app/features/settings/organization/components/organization-settings-client.tsx
index 593c8b55b..cc6a7afb1 100644
--- a/services/platform/app/features/settings/organization/components/organization-settings-client.tsx
+++ b/services/platform/app/features/settings/organization/components/organization-settings-client.tsx
@@ -117,7 +117,7 @@ export function OrganizationSettingsClient({
             id="org-name"
             label={tSettings('organization.title')}
             {...register('name')}
-            className="max-w-sm flex-1"
+            wrapperClassName="max-w-sm flex-1"
           />
           <Button
             type="submit"