From 369d6f688644cb47626eccc86be37739c5be5ff8 Mon Sep 17 00:00:00 2001
From: Song367 <601337784@qq.com>
Date: Sat, 21 Mar 2026 14:52:27 +0800
Subject: [PATCH] fix: scale subtitle preview text

---
 src/components/UploadScreen.test.tsx | 6 +++---
 src/components/UploadScreen.tsx      | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/UploadScreen.test.tsx b/src/components/UploadScreen.test.tsx
index a89451e..83f41ef 100644
--- a/src/components/UploadScreen.test.tsx
+++ b/src/components/UploadScreen.test.tsx
@@ -39,7 +39,7 @@ describe('UploadScreen', () => {
     cleanup();
   });
 
-  it('starts from the editor default subtitle size and position and updates the preview', () => {
+  it('scales the subtitle preview while preserving the real subtitle size value', () => {
     renderUploadScreen();
 
     const sizeSlider = screen.getByLabelText(/subtitle initial size/i);
@@ -48,12 +48,12 @@ describe('UploadScreen', () => {
 
     expect(sizeSlider).toHaveValue('24');
     expect(positionSlider).toHaveValue('10');
-    expect(preview).toHaveStyle({ fontSize: '24px', bottom: '10%' });
+    expect(preview).toHaveStyle({ fontSize: '12px', bottom: '10%' });
 
     fireEvent.change(sizeSlider, { target: { value: '32' } });
     fireEvent.change(positionSlider, { target: { value: '18' } });
 
-    expect(preview).toHaveStyle({ fontSize: '32px', bottom: '18%' });
+    expect(preview).toHaveStyle({ fontSize: '16px', bottom: '18%' });
   });
 
   it('renders upload, mode, subtitle defaults, and language cards inside the responsive workbench', () => {
diff --git a/src/components/UploadScreen.tsx b/src/components/UploadScreen.tsx
index b91a4e3..2c7954d 100644
--- a/src/components/UploadScreen.tsx
+++ b/src/components/UploadScreen.tsx
@@ -34,6 +34,8 @@ export default function UploadScreen({
   const [subtitleDefaults, setSubtitleDefaults] = useState<SubtitleDefaults>(DEFAULT_SUBTITLE_DEFAULTS);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const activeModeLabel = mode === 'editing' ? m.upload.editingMode : m.upload.simpleMode;
+  const previewFontSize = Math.max(10, Math.round(subtitleDefaults.fontSize * 0.5));
+  const previewTextShadowSize = previewFontSize >= 18 ? 2 : 1;
   const settingsCardClass =
     'app-surface rounded-[24px] border border-white/70 px-4 py-4 shadow-[0_18px_60px_-34px_rgba(15,23,42,0.3)] sm:px-5';
 
@@ -104,8 +106,8 @@ export default function UploadScreen({
                   className="absolute left-1/2 max-w-[88%] -translate-x-1/2 whitespace-pre-wrap px-3 py-1 text-center font-semibold text-white"
                   style={{
                     bottom: `${subtitleDefaults.bottomOffsetPercent}%`,
-                    fontSize: `${subtitleDefaults.fontSize}px`,
-                    textShadow: '2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000',
+                    fontSize: `${previewFontSize}px`,
+                    textShadow: `${previewTextShadowSize}px 0 #000, -${previewTextShadowSize}px 0 #000, 0 ${previewTextShadowSize}px #000, 0 -${previewTextShadowSize}px #000`,
                   }}
                 >
                   {m.upload.subtitlePreview}