From 482c918cf0aec92b58c5ad10481be7fe0e9435d9 Mon Sep 17 00:00:00 2001
From: ren <18050944+renintw@users.noreply.github.com>
Date: Thu, 5 Dec 2024 22:25:15 +0900
Subject: [PATCH] Enhance styles

---
 .../src/lesson-facilitator-notes/index.js     | 19 ++++++-------------
 .../src/lesson-facilitator-notes/style.scss   | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js
index c19f3777f..1d2ff47ea 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js
+++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js
@@ -95,19 +95,12 @@ registerBlockType( metadata.name, {
 								? __( 'Collapse Content', 'wporg-learn' )
 								: __( 'Expand Content', 'wporg-learn' ) }
 						</Button>
-						<div
-							style={ {
-								maxHeight: isExpanded ? 'none' : '100px', // Adjust the height as needed
-								overflow: 'hidden',
-								transition: 'max-height 0.3s ease',
-							} }
-						>
-							<RichText
-								label={ __( 'Edit Lesson Plan Content', 'wporg-learn' ) }
-								value={ lessonPlanContent }
-								onChange={ ( newContent ) => setAttributes( { lessonPlanContent: newContent } ) }
-							/>
-						</div>
+						<RichText
+							className={ isExpanded ? 'is-expanded' : 'is-collapsed' }
+							label={ __( 'Edit Lesson Plan Content', 'wporg-learn' ) }
+							value={ lessonPlanContent }
+							onChange={ ( newContent ) => setAttributes( { lessonPlanContent: newContent } ) }
+						/>
 					</>
 				) }
 				{ lessonPlanId && (
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss
index 98b8ce689..ad9d0237c 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss
@@ -1,5 +1,20 @@
 .wp-block-wporg-learn-lesson-facilitator-notes {
+	.components-base-control__field {
+		margin-bottom: var(--wp--preset--spacing--10);
+	}
+
 	.block-editor-rich-text__editable {
 		white-space: unset !important;
+		overflow: scroll;
+		border: 1px solid var(--wp--preset--color--charcoal-5);
+		margin: var(--wp--preset--spacing--10) 0;
+
+		&.is-expanded {
+			max-height: none;
+		}
+
+		&.is-collapsed {
+			max-height: 300px;
+		}
 	}
 }