PR again (this time, let's squash it)

frontend/src/editor/editor.module.css

@@ -1,4 +1,3 @@
-/* Controls CSS for editor in all the pages (editor, demo, study) */
 .editorContainer {
     margin: 20px;
     background: #fff;
@@ -7,12 +6,10 @@
     line-height: 20px;
     font-weight: 400;
     text-align: left;
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
-    padding: 50px 50px 50px 50px; /* NEW: Add right padding to the editor container instead of doing that in editor */
-    height: 80vh; /* NEW: Set height to 80vh for the editor container */
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+    padding: 50px 0 50px 50px;
 }
 
-/* Controls CSS for editor in all the pages (editor, demo, study) */
 .editor {
     resize: none;
     font-size: 16px;
@@ -22,9 +19,10 @@
     outline: 0;
     caret-color: #444;
     overflow-y: scroll;
-    height: 100%; /* NEW: Full height to fill the editorcontainer */
+    height: 80vh;
     scrollbar-width: thin;
     scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
+    padding-right: 46px;
 }
 
 .editor::-webkit-scrollbar {

frontend/src/editor/index.tsx

@@ -151,48 +151,48 @@ function Router({
 		else if (page === 'study-task1') {
 			const condition = 'Completion'; // This would be dynamically set based on the study task
 			getDefaultStore().set(studyConditionAtom, condition);
-			const taskDescription = 'Task 1: Should companies adopt a four-day work week (working Monday through Thursday) instead of the traditional five-day schedule? Consider impacts on productivity, employee well-being, and business operations.';
+			const taskDescription = 'Should companies adopt a four-day work week (working Monday through Thursday) instead of the traditional five-day schedule? Consider impacts on productivity, employee well-being, and business operations.';
 			getDefaultStore().set(taskDescriptionAtom, taskDescription);
 
-			return <div>
-				<div className={classes.studytaskcontainer}> {taskDescription} </div>
+			return <div>Study Task 1 Page - Condition: {condition}
+				<div> {taskDescription}</div>
 
 				<EditorScreen />
 
 				<button
 					onClick={() => window.location.search = '?page=study-task2'}
-					className={classes.doneButton}> Save and Continue
+					className={classes.doneButton}> I'm Done
 				</button>
 
 			</div>;
 		}
 		else if (page === 'study-task2') {
 			const condition = 'Question' // This would be dynamically set based on the study task
 			getDefaultStore().set(studyConditionAtom, condition);
-			const taskDescription = 'Task 2: Should companies adopt a four-day work week (working Monday through Thursday) instead of the traditional five-day schedule? Consider impacts on productivity, employee well-being, and business operations.';
+			const taskDescription = 'description';
 			getDefaultStore().set(taskDescriptionAtom, taskDescription);
 
-			return <div>
-				<div className={classes.studytaskcontainer}> {taskDescription} </div>
-
+			return <div>Study Task 2 Page - Condition: {condition}
+				<div>
+					{taskDescription}</div>
 				<EditorScreen />
 
 				<button
 					onClick={() => window.location.search = '?page=study-task3'}
-					className={classes.doneButton}> Save and Continue
+					className={classes.doneButton}> I'm Done
 				</button>
 
 			</div>;
 		}
 		else if (page === 'study-task3') {
 			const condition = 'RMove' // This would be dynamically set based on the study task
 			getDefaultStore().set(studyConditionAtom, condition);
-			const taskDescription = 'Task 3: Should companies adopt a four-day work week (working Monday through Thursday) instead of the traditional five-day schedule? Consider impacts on productivity, employee well-being, and business operations.';
+			const taskDescription = 'description';
 			getDefaultStore().set(taskDescriptionAtom, taskDescription);
 
-			return <div>
-				<div className={classes.studytaskcontainer}> {taskDescription} </div>
-
+			return <div>Study Task 3 Page - Condition: {condition}
+				<div>
+					{taskDescription}</div>
 				<EditorScreen />
 
 				<button

frontend/src/editor/styles.module.css

@@ -1,37 +1,27 @@
-/* Container for the editor and sidebar in editor and study page */
 .container {
-	justify-content: space-evenly;
-	font-family: 'Segoe UI', sans-serif, Arial, Helvetica;
 	display: flex;
-  flex-direction: row;
+	justify-content: space-between;
+	font-family: 'Segoe UI', sans-serif, Arial, Helvetica;
 }
 
 .editor {
-	flex: 1;
-	min-width: 15rem;
+	min-width: 60rem;
 	max-width: 60rem;
+	width: 100%;
 }
 
-/* Sidebar for editor and study page */
 .sidebar {
-	flex: 0 1 28rem;
-	min-width: 14rem;
-	margin: 20px 0px 20px 0px;
-	height: 80vh; /*NEW: Set height to 80vh for the sidebar*/
-	box-shadow: -2px 0 5px rgba(0,0,0,0.3);
+	margin: 20px;
+	overflow-y: scroll;
+	width: 28rem;
+	min-width: 28rem;
+	box-shadow: -2px 0 5px rgba(0,0,0,0.1);
 	font-family: 'Segoe UI', sans-serif, Arial, Helvetica;
+	position: sticky;
 	right: 0;
 	background-color: white;
 }
 
-/* Study task description container */
-.studytaskcontainer{
-	max-width: 58.9rem;
-	padding: 0.5rem 0rem 0rem 0rem;
-	margin: 0rem 0rem 0rem 3.9rem;
-}
-
-/* Container for the editor and sidebar in demo page*/
 .democontainer {
 	display: flex;
 	justify-content: center;
@@ -45,10 +35,8 @@
 	position: relative;
 }
 
-/* Sidebar for demo page */
 .demosidebar {
 	margin: 20px;
-	height: 80vh; /* NEW: Set height to 80vh for the demo sidebar */
 	overflow-y: scroll;
 	width: 28rem;
 	min-width: 28rem;
@@ -135,6 +123,4 @@
 		bottom: 1rem;
 		right: 1rem;
 		z-index: 1000;
-		transform: translateX(-2rem);
-		/* border: #d32f2f 1px solid; */
 }

frontend/src/pages/draft/styles.module.css

@@ -30,7 +30,6 @@ h4 {
 
 .optionsButton,
 .optionsButtonActive {
-	display: flex; /* Fixes centering of icon in suggestion button */
 	background-color: #ffffff;
 	font-size: 1rem;
 	font-weight: 600;

frontend/src/pages/study/index.tsx

@@ -333,7 +333,7 @@ export default function Draft() {
 		);
 
 	return (
-		<div className=" flex flex-col gap-2 relative p-2 h-[73vh]">
+		<div className=" flex flex-col gap-2 relative p-2">
 
 			{ /* Document Context Text Container */ }
 			<div className= "text-sm p-[8px] m-[8px] shadow-[0_6px_10px_-1px_rgba(147,123,109,0.1)]">
@@ -379,16 +379,16 @@ export default function Draft() {
 				</div>
 			</div>
 
-
+			<div>
 				{ /* Result of the generation */ }
-				<div className='h-[60vh] overflow-auto'>{ results }</div>
+				<div className={ classes.reflectionContainer }>{ results }</div>
 
 				{ /* Saved generations */ }
 				<SavedGenerations
 					savedItems={ savedItems }
 					deleteSavedItem={ deleteSavedItem }
 				/>
-
+			</div>
 		</div>
 	);
 }

frontend/src/pages/study/styles.module.css

@@ -18,8 +18,8 @@ h4 {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
-	margin-top: 0.1rem;
-	margin-bottom: 0.1rem;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
 	position: relative;
 }
 
@@ -30,7 +30,6 @@ h4 {
 
 .optionsButton,
 .optionsButtonActive {
-	display: flex; /* Fixes centering of icon in suggestion button */
 	background-color: #ffffff;
 	font-size: 1rem;
 	font-weight: 600;
@@ -351,8 +350,6 @@ h4 {
 .historyContainer {
 	justify-content: center;
 	align-items: center;
-	height: 100%;
-	overflow-y: scroll;
 }
 
 .historyButtonWrapper {