feat: modify the layout of project page

Author: elainefan331

src/components/User/Dashboard/DatasetOrganizer/LLMPanel.tsx

@@ -753,7 +753,8 @@ const LLMPanel: React.FC<LLMPanelProps> = ({
   return (
     <Paper
       sx={{
-        position: "fixed",
+        // position: "fixed",
+        position: "absolute",
         bottom: 0,
         left: 0,
         right: 0,
@@ -939,7 +940,7 @@ const LLMPanel: React.FC<LLMPanelProps> = ({
                 {generatingEvidence
                   ? "Generating..."
                   : evidenceBundle
-                  ? "✓ Generate Evidence Bundle"
+                  ? "✓  1. Generate Evidence Bundle"
                   : "1. Generate Evidence Bundle"}
               </Button>
 
@@ -972,7 +973,7 @@ const LLMPanel: React.FC<LLMPanelProps> = ({
                 {generatingTrio
                   ? "Generating..."
                   : trioGenerated
-                  ? "✓ Generate BIDS Trio"
+                  ? "✓  2. Generate BIDS Trio"
                   : "2. Generate BIDS Trio"}
               </Button>
               <Typography
@@ -983,7 +984,7 @@ const LLMPanel: React.FC<LLMPanelProps> = ({
                   py: 1,
                 }}
               >
-                3. Ready to Generate Script ↓
+                Ready to Generate Script ↓
               </Typography>
             </Box>
           </Box>
@@ -1008,7 +1009,7 @@ const LLMPanel: React.FC<LLMPanelProps> = ({
               },
             }}
           >
-            {loading ? "Generating..." : "Generate Script"}
+            {loading ? "Generating..." : "3. Generate Script"}
           </Button>
 
           {/* cancel button*/}

src/components/User/Dashboard/DatasetOrganizer/index.tsx

@@ -330,7 +330,7 @@ const DatasetOrganizer: React.FC = () => {
       {/* Main Content */}
       <Box sx={{ display: "flex", flex: 1, minHeight: 0 }}>
         {/* Left: Drop Zone */}
-        <Box sx={{ flex: 1, overflow: "auto", p: 3 }}>
+        <Box sx={{ flex: 1, overflow: "auto", p: 3, position: "relative" }}>
           <DropZone
             files={files}
             setFiles={updateFiles} // Pass wrapper
@@ -341,6 +341,20 @@ const DatasetOrganizer: React.FC = () => {
             expandedIds={expandedIds}
             setExpandedIds={setExpandedIds}
           />
+          {/* LLM Panel */}
+          {showLLMPanel && (
+            <LLMPanel
+              files={files}
+              baseDirectoryPath={baseDirectoryPath}
+              setBaseDirectoryPath={setBaseDirectoryPath}
+              evidenceBundle={evidenceBundle}
+              setEvidenceBundle={setEvidenceBundle}
+              trioGenerated={trioGenerated}
+              setTrioGenerated={setTrioGenerated}
+              updateFiles={updateFiles}
+              onClose={() => setShowLLMPanel(false)}
+            />
+          )}
         </Box>
 
         {/* Right: File Tree */}
@@ -354,21 +368,6 @@ const DatasetOrganizer: React.FC = () => {
         />
       </Box>
 
-      {/* LLM Panel */}
-      {showLLMPanel && (
-        <LLMPanel
-          files={files}
-          baseDirectoryPath={baseDirectoryPath}
-          setBaseDirectoryPath={setBaseDirectoryPath}
-          evidenceBundle={evidenceBundle}
-          setEvidenceBundle={setEvidenceBundle}
-          trioGenerated={trioGenerated}
-          setTrioGenerated={setTrioGenerated}
-          updateFiles={updateFiles}
-          onClose={() => setShowLLMPanel(false)}
-        />
-      )}
-
       {/* Exit Confirmation Dialog */}
       <Dialog open={showExitDialog} onClose={() => setShowExitDialog(false)}>
         <DialogTitle>Unsaved Changes</DialogTitle>