Fix create page generation layout

src/components/create/generation-task-list.tsx

@@ -19,6 +19,22 @@ type GenerationTaskListProps = {
 export function GenerationTaskList({ tasks }: GenerationTaskListProps) {
   if (tasks.length === 0) return null;
 
+  if (tasks.length === 1) {
+    const task = tasks[0];
+
+    return (
+      <div className="liquid-glass min-h-[300px] overflow-hidden rounded-2xl border-dashed text-muted-foreground">
+        <GenerationLoadingPanel
+          startedAt={task.startedAt}
+          estimateSeconds={task.estimateSeconds}
+          jobStatus={task.jobStatus}
+          finalCountdownSeconds={task.finalCountdownSeconds}
+          title={task.title}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between gap-3 text-sm font-medium">

src/components/create/image-to-image.tsx

@@ -615,33 +615,33 @@ export function ImageToImagePanel() {
         </div>
 
         {/* Image Params */}
-        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-          <div className="space-y-2">
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3 lg:grid-cols-4">
+          <div className="min-w-0 space-y-2">
             <Label>画面比例</Label>
             <Select value={aspectRatio} onValueChange={setAspectRatio}>
-              <SelectTrigger><SelectValue /></SelectTrigger>
-              <SelectContent>
-                {IMG2IMG_ASPECT_RATIOS.map(ar => (
-                  <SelectItem key={ar.value} value={ar.value}>{ar.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2">
-            <Label>分辨率</Label>
-            <Select value={resolution} onValueChange={setResolution}>
-              <SelectTrigger><SelectValue /></SelectTrigger>
-              <SelectContent>
-                {RESOLUTION_OPTIONS.map(r => (
-                  <SelectItem key={r.value} value={r.value}>{r.label}</SelectItem>
-                ))}
+              <SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {IMG2IMG_ASPECT_RATIOS.map(ar => (
+                  <SelectItem key={ar.value} value={ar.value}>{ar.label}</SelectItem>
+                ))}
               </SelectContent>
             </Select>
           </div>
-          <div className="space-y-2">
+          <div className="min-w-0 space-y-2">
+            <Label>分辨率</Label>
+            <Select value={resolution} onValueChange={setResolution}>
+              <SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {RESOLUTION_OPTIONS.map(r => (
+                  <SelectItem key={r.value} value={r.value}>{r.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="min-w-0 space-y-2">
             <Label>图片格式</Label>
             <Select value={outputFormat} onValueChange={v => setOutputFormat(v as ImageOutputFormat)}>
-              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
               <SelectContent>
                 {IMAGE_OUTPUT_FORMAT_OPTIONS.map(format => (
                   <SelectItem key={format.value} value={format.value}>{format.label}</SelectItem>
@@ -649,10 +649,10 @@ export function ImageToImagePanel() {
               </SelectContent>
             </Select>
           </div>
-          <div className="space-y-2">
+          <div className="min-w-0 space-y-2">
             <Label>质量</Label>
             <Select value={imageQuality} onValueChange={v => setImageQuality(v as ImageQuality)}>
-              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
               <SelectContent>
                 {IMAGE_QUALITY_OPTIONS.map(option => (
                   <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
@@ -686,8 +686,9 @@ export function ImageToImagePanel() {
 
       {/* Right: Results + History */}
       <div className="min-w-0 space-y-4">
-        <GenerationTaskList tasks={activeTasks} />
-        {generationError ? (
+        {generating ? (
+          <GenerationTaskList tasks={activeTasks} />
+        ) : generationError ? (
           <GenerationErrorPanel error={generationError} />
         ) : results.length > 0 ? (
           <div className="space-y-3">

src/components/create/image-to-video.tsx

@@ -502,8 +502,9 @@ export function ImageToVideoPanel() {
 
       {/* Right: Results + History */}
       <div className="min-w-0 space-y-4">
-        <GenerationTaskList tasks={activeTasks} />
-        {generationError ? (
+        {generating ? (
+          <GenerationTaskList tasks={activeTasks} />
+        ) : generationError ? (
           <GenerationErrorPanel error={generationError} />
         ) : results.length > 0 ? (
           <div className="space-y-3">

src/components/create/text-to-image.tsx

@@ -427,11 +427,11 @@ export function TextToImagePanel() {
         </div>
 
         {/* Image Params */}
-        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-          <div className="space-y-2">
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3 lg:grid-cols-4">
+          <div className="min-w-0 space-y-2">
             <Label>画面比例</Label>
             <Select value={aspectRatio} onValueChange={setAspectRatio}>
-              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
               <SelectContent>
                 {ASPECT_RATIOS.map(ar => (
                   <SelectItem key={ar.value} value={ar.value}>{ar.label}</SelectItem>
@@ -439,10 +439,10 @@ export function TextToImagePanel() {
               </SelectContent>
             </Select>
           </div>
-          <div className="space-y-2">
+          <div className="min-w-0 space-y-2">
             <Label>分辨率</Label>
             <Select value={resolution} onValueChange={setResolution}>
-              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
               <SelectContent>
                 {RESOLUTION_OPTIONS.map(r => (
                   <SelectItem key={r.value} value={r.value}>{r.label}</SelectItem>
@@ -450,10 +450,10 @@ export function TextToImagePanel() {
               </SelectContent>
             </Select>
           </div>
-          <div className="space-y-2">
+          <div className="min-w-0 space-y-2">
             <Label>图片格式</Label>
             <Select value={outputFormat} onValueChange={v => setOutputFormat(v as ImageOutputFormat)}>
-              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
               <SelectContent>
                 {IMAGE_OUTPUT_FORMAT_OPTIONS.map(format => (
                   <SelectItem key={format.value} value={format.value}>{format.label}</SelectItem>
@@ -461,10 +461,10 @@ export function TextToImagePanel() {
               </SelectContent>
             </Select>
           </div>
-          <div className="space-y-2">
+          <div className="min-w-0 space-y-2">
             <Label>质量</Label>
             <Select value={imageQuality} onValueChange={v => setImageQuality(v as ImageQuality)}>
-              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectTrigger className="w-full min-w-0"><SelectValue /></SelectTrigger>
               <SelectContent>
                 {IMAGE_QUALITY_OPTIONS.map(option => (
                   <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
@@ -498,9 +498,10 @@ export function TextToImagePanel() {
 
       {/* Right: Results + History (flex-1, takes remaining space) */}
       <div className="min-w-0 space-y-4">
-        <GenerationTaskList tasks={activeTasks} />
         {/* Results area */}
-        {generationError ? (
+        {generating ? (
+          <GenerationTaskList tasks={activeTasks} />
+        ) : generationError ? (
           <GenerationErrorPanel error={generationError} />
         ) : results.length > 0 ? (
           <div className="space-y-3">

src/components/create/text-to-video.tsx

@@ -357,8 +357,9 @@ export function TextToVideoPanel() {
 
       {/* Right: Results + History */}
       <div className="min-w-0 space-y-4">
-        <GenerationTaskList tasks={activeTasks} />
-        {generationError ? (
+        {generating ? (
+          <GenerationTaskList tasks={activeTasks} />
+        ) : generationError ? (
           <GenerationErrorPanel error={generationError} />
         ) : results.length > 0 ? (
           <div className="space-y-3">