fix: title default position lower & drag stability

1. PreviewPlayer.tsx: title top position changed from 8px to 6.25%
   (matching ASS coordinate system ~120/1920 for 9:16 videos)

2. FrontendPreviewPlayer.tsx: title container now uses fixed width
   (100 - 2*sideMargin%) in both default and drag states, preventing
   layout reflow and unwanted line breaks when dragging.

apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx

@@ -87,7 +87,7 @@ const PreviewPlayer: React.FC<PreviewPlayerProps> = ({
                 WebkitTextStroke: "1px rgba(0,0,0,0.6)",
                 top:
                   titleConfig.position === "top"
-                    ? "8px"
+                    ? "6.25%"
                     : titleConfig.position === "center"
                       ? "50%"
                       : "auto",

apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx

@@ -591,6 +591,8 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           <div
             style={{
               position: "absolute",
+              width: `${100 - 2 * titleSidePct}%`,
+              maxWidth: `${100 - 2 * titleSidePct}%`,
               ...(customTitleXPct != null && customTitleYPct != null
                 ? {
                     left: `${customTitleXPct}%`,
@@ -599,13 +601,13 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
                     textAlign: "center" as const,
                   }
                 : {
-                    left: `${titleSidePct}%`,
-                    right: `${titleSidePct}%`,
+                    left: "50%",
+                    transform: "translateX(-50%)",
                     textAlign: "center" as const,
                     ...(titleSettings.position === "top"
                       ? { top: `${titleTopPct}%` }
                       : titleSettings.position === "center"
-                        ? { top: "50%", transform: "translateY(-50%)" }
+                        ? { top: "50%", transform: "translate(-50%, -50%)" }
                         : { bottom: `${titleBottomPct}%` }),
                   }),
               pointerEvents: "auto",