feat(styles): add support for custom className and style in DualScrollSyncContent component

Author: dorixdev

lib/components/DualScrollSync/DualScrollSyncContent/DualScrollSyncContent.test.tsx

@@ -17,4 +17,17 @@ describe('DualScrollSyncContent', () => {
 
 		expect(getByTestId('test-content-id')).toBeInTheDocument();
 	});
+
+	it('should apply custom className and style', () => {
+		const { getByTestId } = render(
+			<DualScrollSyncContent className="custom-class" style={{ borderWidth: '1px' }}>
+				<div>Styled Content</div>
+			</DualScrollSyncContent>
+		);
+
+		const content = getByTestId('test-content-id');
+
+		expect(content).toHaveClass('custom-class');
+		expect(content).toHaveStyle('border-width: 1px');
+	});
 });

lib/components/DualScrollSync/DualScrollSyncContent/DualScrollSyncContent.tsx

@@ -16,10 +16,10 @@ export const DualScrollSyncContent: FC<DualScrollSyncContentProps> = ({
 	return (
 		<section
 			className={clsx(styles.scrollSyncContent, className)}
-			style={style}
 			data-testid={contentId}
 			id={contentId}
 			ref={contentRef}
+			style={style}
 		>
 			{children}
 		</section>