Rearrange article parameters

src/app/page.tsx

@@ -258,7 +258,7 @@ export default function QuestionBuilder() {
         <div className="flex-1 flex flex-col">
           {/* Upper Right Panel: Source Article Editor */}
           <Article
-            className="h-1/2"
+            className="flex-1"
             sourceArticle={sourceArticle}
             onSourceArticleChange={setSourceArticle}
             isSourceLocked={isSourceLocked}
@@ -267,7 +267,7 @@ export default function QuestionBuilder() {
 
           {/* Lower Right Panel: Question List */}
           <QuestionList
-            className="h-1/2"
+            className="flex-1"
             questions={questions}
             questionTypes={QUESTION_TYPES}
             selectedQuestions={selectedQuestions}

src/components/article/Article.tsx

@@ -7,6 +7,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 
 interface ArticleProps {
   className?: string;
@@ -27,6 +28,7 @@ export function Article({
   const [wordCount, setWordCount] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isGeneratingArticle, setIsGeneratingArticle] = useState(false);
+  const [isExpandOpen, setIsExpandOpen] = useState(false);
 
   const updateWordCount = (text: string) => {
     const words = text.trim().split(/\s+/).length;
@@ -68,8 +70,8 @@ export function Article({
   };
 
   return (
-    <Card className={`border-b ${className}`}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <Card className={`flex flex-col ${className}`}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4 px-6 pt-2">
         <CardTitle className="text-lg font-semibold">
           📄 Source Article
         </CardTitle>
@@ -94,16 +96,24 @@ export function Article({
               🔒 Lock
             </Label>
           </div>
+          <Button
+            onClick={() => setIsExpandOpen(true)}
+            disabled={isSourceLocked}
+            variant="outline"
+            size="sm"
+          >
+            ⤢ Expand
+          </Button>
         </div>
       </CardHeader>
 
-      <CardContent className="h-[calc(100%-80px)]">
+      <CardContent className="flex-1 px-6 pb-6">
         <Textarea
           value={sourceArticle}
           onChange={(e) => handleSourceArticleChange(e.target.value)}
           placeholder="Paste or type your source article here (articles, passages, etc.)..."
           disabled={isSourceLocked}
-          className="w-full h-full resize-none min-h-[300px]"
+          className="w-full h-full resize-none min-h-[200px]"
         />
       </CardContent>
 
@@ -113,6 +123,24 @@ export function Article({
         onGenerate={handleGenerateArticle}
         isGenerating={isGeneratingArticle}
       />
+
+      {/* Full-screen editor dialog for comfortable editing */}
+      <Dialog open={isExpandOpen} onOpenChange={setIsExpandOpen}>
+        <DialogContent className="w-[98vw] sm:max-w-none md:max-w-[90vw] h-[70vh] max-h-[95vh] p-0 flex flex-col">
+          <DialogHeader className="px-6 pt-6 pb-2">
+            <DialogTitle>📄 Edit Source Article</DialogTitle>
+          </DialogHeader>
+          <div className="flex-1 px-6 pb-6">
+            <Textarea
+              value={sourceArticle}
+              onChange={(e) => handleSourceArticleChange(e.target.value)}
+              placeholder="Paste or type your source article here (articles, passages, etc.)..."
+              disabled={isSourceLocked}
+              className="w-full h-full resize-none"
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
     </Card>
   );
 }

src/components/article/ArticleGenerationModal.tsx

@@ -132,15 +132,32 @@ export function ArticleGenerationModal({
 
         <ScrollArea className="h-[calc(90vh-200px)] pr-4">
           <form onSubmit={handleSubmit} className="space-y-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <CheckboxField
-                label="出版社 (Publisher)"
-                fieldName="publisher"
-                value={formData.publisher}
-                onChange={(value: string) => handleCheckboxChange('publisher', value)}
-                options={PUBLISHER_OPTIONS}
-                columns={1}
+            {/* 初始文章 */}
+            <div>
+              <Label htmlFor="input-article" className="mb-2">
+                初始文章 (Initial Article)
+              </Label>
+              <Textarea
+                id="input-article"
+                value={formData.inputArticle}
+                onChange={(e) => handleTextChange('inputArticle', e.target.value)}
+                placeholder="Enter an initial article or topic to base the generation on..."
+                className="min-h-[120px]"
               />
+            </div>
+
+            {/* 出版社 */}
+            <CheckboxField
+              label="出版社 (Publisher)"
+              fieldName="publisher"
+              value={formData.publisher}
+              onChange={(value: string) => handleCheckboxChange('publisher', value)}
+              options={PUBLISHER_OPTIONS}
+              columns={1}
+            />
+
+            {/* 學生年級 + 課程範圍 */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               <CheckboxField
                 label="學生年級 (Grade Level)"
                 fieldName="grade"
@@ -149,41 +166,17 @@ export function ArticleGenerationModal({
                 options={GRADE_OPTIONS}
                 columns={1}
               />
-            </div>
-
-            <CheckboxField
-              label="課程範圍 (Unit Range)"
-              fieldName="unit"
-              value={formData.unit}
-              onChange={(value: string) => handleCheckboxChange('unit', value)}
-              options={UNIT_OPTIONS}
-              columns={3}
-            />
-
-            <div>
-              <Label htmlFor="textbook-vocab" className="mb-2">
-                課本單字列表 (Textbook Vocabulary)
-              </Label>
-              <Textarea
-                id="textbook-vocab"
-                value={formData.textbookVocab}
-                readOnly
-                placeholder="Select units to see vocabulary"
-                className="bg-muted"
-              />
-            </div>
-            <div>
-              <Label htmlFor="additional-vocab" className="mb-2">
-                額外單字列表 (Additional Vocabulary)
-              </Label>
-              <Textarea
-                id="additional-vocab"
-                value={formData.additionalVocab}
-                onChange={(e) => handleTextChange('additionalVocab', e.target.value)}
-                placeholder="Enter additional vocabulary words, separated by commas"
+              <CheckboxField
+                label="課程範圍 (Unit Range)"
+                fieldName="unit"
+                value={formData.unit}
+                onChange={(value: string) => handleCheckboxChange('unit', value)}
+                options={UNIT_OPTIONS}
+                columns={1}
               />
             </div>
 
+            {/* 文法範圍 + 主題範圍 */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               <CheckboxField
                 label="文法範圍 (Grammar Focus)"
@@ -203,16 +196,30 @@ export function ArticleGenerationModal({
               />
             </div>
 
+            {/* 單字列表 */}
             <div>
-              <Label htmlFor="input-article" className="mb-2">
-                初始文章 (Initial Article)
+              <Label htmlFor="textbook-vocab" className="mb-2">
+                課本單字列表 (Textbook Vocabulary)
               </Label>
               <Textarea
-                id="input-article"
-                value={formData.inputArticle}
-                onChange={(e) => handleTextChange('inputArticle', e.target.value)}
-                placeholder="Enter an initial article or topic to base the generation on..."
-                className="min-h-[120px]"
+                id="textbook-vocab"
+                value={formData.textbookVocab}
+                readOnly
+                placeholder="Select units to see vocabulary"
+                className="bg-muted"
+              />
+            </div>
+
+            {/* 額外單字列表 */}
+            <div>
+              <Label htmlFor="additional-vocab" className="mb-2">
+                額外單字列表 (Additional Vocabulary)
+              </Label>
+              <Textarea
+                id="additional-vocab"
+                value={formData.additionalVocab}
+                onChange={(e) => handleTextChange('additionalVocab', e.target.value)}
+                placeholder="Enter additional vocabulary words, separated by commas"
               />
             </div>
           </form>