From 9da5fed74cea1267210273238440751d75d8cd95 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Mon, 26 Feb 2024 18:53:37 +0300
Subject: [PATCH] [ENG-1625] Spacedrop UI correct hover condition & spacing
 (#2127)

* improve spacedrop ui with correct hover & spacing

* remove
---
 interface/app/$libraryId/Spacedrop/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/interface/app/$libraryId/Spacedrop/index.tsx b/interface/app/$libraryId/Spacedrop/index.tsx
index 0b75a3e1f..11bfe5b17 100644
--- a/interface/app/$libraryId/Spacedrop/index.tsx
+++ b/interface/app/$libraryId/Spacedrop/index.tsx
@@ -60,7 +60,7 @@ export function Spacedrop({ triggerClose }: { triggerClose: () => void }) {
 	const ref = useRef<HTMLDivElement>(null);
 	const discoveredPeers = useDiscoveredPeers();
 	const doSpacedrop = useBridgeMutation('p2p.spacedrop');
-		const { t } = useLocale();
+	const { t } = useLocale();
 	// We keep track of how many instances of this component is rendering.
 	// This is used by `SpacedropButton` to determine if the animation should stop.
 	useEffect(() => {
@@ -118,9 +118,11 @@ export function Spacedrop({ triggerClose }: { triggerClose: () => void }) {
 								{t("no_nodes_found")}
 							</p>
 			</div>}
+					<div className='flex flex-col space-y-2'>
 					{Array.from(discoveredPeers).map(([id, meta]) => (
 						<Node key={id} id={id} name={meta.name as HardwareModel} onDropped={onDropped} />
 					))}
+					</div>
 				</div>
 			</div>
 		</div>
@@ -148,8 +150,8 @@ function Node({
 		<div
 			ref={ref}
 			className={clsx(
-				'flex items-center justify-center gap-3 rounded-md border border-app-line bg-app-darkBox px-3 py-2 font-medium text-ink',
-				state === 'hovered' ? 'border-solid border-accent-deep' : 'border-dashed'
+				'flex items-center justify-start gap-2 rounded-md border bg-app-darkBox px-3 py-2 font-medium text-ink',
+				state === 'hovered' ? 'border-solid border-accent-deep' : 'border-dashed border-app-line'
 			)}
 			onClick={() => {
 				if (!platform.openFilePickerDialog) {