diff --git a/src/pages/settings/components/Theming/BackgroundModal.tsx b/src/pages/settings/components/Theming/BackgroundModal.tsx
index 766081a..fcc66da 100644
--- a/src/pages/settings/components/Theming/BackgroundModal.tsx
+++ b/src/pages/settings/components/Theming/BackgroundModal.tsx
@@ -39,6 +39,7 @@ 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>('');
@@ -62,6 +63,11 @@ function BackgroundModal({
 			setIsLoading(false);
 		}
 	}, [debouncedSearch]);
+	useEffect(() => {
+		if (width) {
+			setBackgroundWidth(width);
+		}
+	}, [width]);
 	return (
 		<Modal.Root
 			size={'75%'}
@@ -200,7 +206,7 @@ function BackgroundModal({
 														textOverflow: 'ellipsis',
 														overflow: 'hidden',
 														whiteSpace: 'nowrap',
-														maxWidth: width,
+														maxWidth: backgroundWidth,
 													}}
 												>
 													{background}