From 4bf5480f318f947918673239806d4f39c783f013 Mon Sep 17 00:00:00 2001
From: Diptesh Choudhuri <ignisda2001@gmail.com>
Date: Sat, 2 Nov 2024 10:30:24 +0530
Subject: [PATCH] fix(frontend): add docs for deduplicate option

---
 .../app/routes/_dashboard.settings.preferences.tsx   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/app/routes/_dashboard.settings.preferences.tsx b/apps/frontend/app/routes/_dashboard.settings.preferences.tsx
index 1fe0580e4c..0d17309b04 100644
--- a/apps/frontend/app/routes/_dashboard.settings.preferences.tsx
+++ b/apps/frontend/app/routes/_dashboard.settings.preferences.tsx
@@ -674,7 +674,7 @@ const EditDashboardElement = (props: {
 					{...provided.draggableProps}
 					className={cn({ [classes.itemDragging]: snapshot.isDragging })}
 				>
-					<Group justify="space-between">
+					<Group justify="space-between" wrap="nowrap">
 						<Group>
 							<div
 								{...provided.dragHandleProps}
@@ -690,7 +690,9 @@ const EditDashboardElement = (props: {
 									stroke={1.5}
 								/>
 							</div>
-							<Title order={3}>{changeCase(props.lot)}</Title>
+							<Text fw="bold" fz={{ md: "lg", lg: "xl" }}>
+								{changeCase(props.lot)}
+							</Text>
 						</Group>
 						<Switch
 							label="Hidden"
@@ -710,7 +712,7 @@ const EditDashboardElement = (props: {
 							}}
 						/>
 					</Group>
-					<Group gap="xl">
+					<Group gap="xl" wrap="nowrap">
 						{EDITABLE_NUM_ELEMENTS.includes(props.lot) ? (
 							<NumberInput
 								size="xs"
@@ -733,10 +735,12 @@ const EditDashboardElement = (props: {
 						) : null}
 						{EDITABLE_DEDUPLICATE_MEDIA.includes(props.lot) ? (
 							<Switch
-								mt="md"
+								size="xs"
 								label="Deduplicate media"
 								disabled={!!props.isEditDisabled}
 								defaultChecked={focusedElement.deduplicateMedia || undefined}
+								styles={{ description: { width: rem(200) } }}
+								description="If there's more than one episode of a media, keep the first one"
 								onChange={(ev) => {
 									const newValue = ev.currentTarget.checked;
 									const newDashboardData = Array.from(