From 6f8eccdd993238b0055d37e0709635fccc7a47ff Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Fri, 6 Oct 2023 16:04:34 +0300
Subject: [PATCH] Fix accordion (#1438)

fix accordion
---
 .../settings/library/locations/AddLocationDialog.tsx     | 2 +-
 interface/components/Accordion.tsx                       | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx b/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
index 9ffbf45f8..cdf32c09d 100644
--- a/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
+++ b/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
@@ -219,7 +219,7 @@ export const AddLocationDialog = ({
 							field={field}
 							label="File indexing rules:"
 							className="relative flex flex-col"
-							rulesContainerClass="grid grid-cols-2 gap-1"
+							rulesContainerClass="grid grid-cols-2 gap-2"
 							ruleButtonClass="w-full"
 						/>
 					)}
diff --git a/interface/components/Accordion.tsx b/interface/components/Accordion.tsx
index d527af413..b3c2e759e 100644
--- a/interface/components/Accordion.tsx
+++ b/interface/components/Accordion.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 const styles = {
 	default: {
-		container: 'flex flex-col gap-1 rounded-b-none px-4',
+		container: 'flex flex-col gap-1 rounded-b-none px-3 py-2',
 		title: 'flex flex-row items-center justify-between px-3 py-2',
 		box: 'rounded-md border border-app-line bg-app-darkBox'
 	},
@@ -39,10 +39,13 @@ const Accordion = ({ isOpen = false, ...props }: PropsWithChildren<Props>) => {
 				<p className="text-xs">{props.title}</p>
 				<CaretDown
 					size={props.caretSize || 12}
-					className={clsx(isOpen && 'rotate-180', 'transition-all duration-200')}
+					className={clsx(
+						(isOpen || toggle) && 'rotate-180',
+						'transition-all duration-200'
+					)}
 				/>
 			</div>
-			{isOpen && <div className={variant.container}>{props.children}</div>}
+			{(isOpen || toggle) && <div className={variant.container}>{props.children}</div>}
 		</div>
 	);
 };