Background name label fix

src/pages/settings/components/Theming/BackgroundModal.tsx

@@ -39,7 +39,6 @@ function BackgroundModal({
 	inUseBackgrounds: string[];
 }) {
 	const { ref, width } = useElementSize();
-	const [backgroundWidth, setBackgroundWidth] = useState<number>(width || 0);
 	const [background, setBackground] = useState<File | null>(null);
 	const [fileName, setFileName] = useState<string>('');
 	const [newFileName, setNewFileName] = useState<string>('');
@@ -63,11 +62,7 @@ function BackgroundModal({
 			setIsLoading(false);
 		}
 	}, [debouncedSearch]);
-	useEffect(() => {
-		if (width) {
-			setBackgroundWidth(width);
-		}
-	}, [width]);
+
 	return (
 		<Modal.Root
 			size={'75%'}
@@ -84,6 +79,7 @@ function BackgroundModal({
 			}}
 			fullScreen={isMobile}
 			centered
+			keepMounted
 		>
 			<Modal.Overlay />
 			<Modal.Content>
@@ -206,7 +202,7 @@ function BackgroundModal({
 														textOverflow: 'ellipsis',
 														overflow: 'hidden',
 														whiteSpace: 'nowrap',
-														maxWidth: backgroundWidth,
+														maxWidth: width,
 													}}
 												>
 													{background}
@@ -251,7 +247,7 @@ function BackgroundModal({
 														setConfirm(true);
 													}}
 												>
-													<FiTrash />
+													<FiTrash color='black' />
 												</ActionIcon>
 											</Group>
 										))}