From d648678c68fc8172ab2901dc647597186a58589a Mon Sep 17 00:00:00 2001
From: Daniil <bkom01@icloud.com>
Date: Mon, 6 Apr 2026 01:29:12 +0300
Subject: [PATCH] feat: add aspectRatio prop to StylePreview for dynamic sizing

---
 .../project/CaptionSettingsStep/StylePreview.module.scss      | 1 +
 src/features/project/CaptionSettingsStep/StylePreview.tsx     | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/features/project/CaptionSettingsStep/StylePreview.module.scss b/src/features/project/CaptionSettingsStep/StylePreview.module.scss
index b338e15..bd8da06 100644
--- a/src/features/project/CaptionSettingsStep/StylePreview.module.scss
+++ b/src/features/project/CaptionSettingsStep/StylePreview.module.scss
@@ -4,6 +4,7 @@
 	background: #0c0a1a;
 	border-radius: 8px;
 	overflow: hidden;
+	width: 100%;
 }
 
 .small {
diff --git a/src/features/project/CaptionSettingsStep/StylePreview.tsx b/src/features/project/CaptionSettingsStep/StylePreview.tsx
index 711af31..f60a176 100644
--- a/src/features/project/CaptionSettingsStep/StylePreview.tsx
+++ b/src/features/project/CaptionSettingsStep/StylePreview.tsx
@@ -15,6 +15,7 @@ interface IStylePreviewProps {
 	config?: CaptionStyleConfig | null
 	size?: "small" | "large"
 	className?: string
+	aspectRatio?: number
 }
 
 const SMALL_SCALE = 0.65
@@ -91,6 +92,7 @@ export const StylePreview: FunctionComponent<IStylePreviewProps> = ({
 	config,
 	size = "small",
 	className,
+	aspectRatio = 9 / 16,
 }): JSX.Element => {
 	const safeConfig = config ?? {}
 	const highlightColor = safeConfig.text?.highlight_color ?? "#FFFF00"
@@ -99,7 +101,7 @@ export const StylePreview: FunctionComponent<IStylePreviewProps> = ({
 	return (
 		<div
 			className={cs(styles.root, styles[size], className)}
-			style={buildPositionStyles(safeConfig, scale)}
+			style={{ ...buildPositionStyles(safeConfig, scale), aspectRatio }}
 			data-testid="StylePreview"
 		>
 			<div