Skip to content

Commit

Permalink
PLU-378: PREVAMP: Make rich text editor scrollable after certain heig…
Browse files Browse the repository at this point in the history
…ht (#830)

## Problem
Rich text editor has an infinite scroll, causing the variable suggestion
box to go off-screen, making it difficult to select variables.

## Solution
Set max-height property for the editor to ensure it scrolls after the
max height.

**Improvements**:
- RTE will be scrollable after the max height set.

## Before & After Screenshots

**BEFORE**:
<img width="863" alt="Screenshot 2024-12-19 at 2 24 08 PM"
src="https://github.com/user-attachments/assets/ee1223d2-4c78-40bb-9f2a-57b66723d364"
/>
<img width="856" alt="Screenshot 2024-12-19 at 2 24 41 PM"
src="https://github.com/user-attachments/assets/6d492f28-f684-40bb-bf69-20f5ea4f7dc9"
/>

**AFTER**:
<img width="856" alt="Screenshot 2024-12-19 at 2 25 25 PM"
src="https://github.com/user-attachments/assets/9fc66c9a-cc5c-4fcb-890c-5861315ad45f"
/>

## Tests
Note: this is a frontend change, no impact to backend functionality.
- [x] RTE content is updated and saved correctly
- [x] Variable suggestion box opens and selected variables are inserted
into RTE correctly.
  • Loading branch information
kevinkim-ogp authored Dec 23, 2024
1 parent 77f1e84 commit d8fddbb
Showing 1 changed file with 1 addition and 0 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.ProseMirror {
padding: 0.5rem 14px;
max-height: 20em;

> * + * {
margin-top: 0.75em;
Expand Down

0 comments on commit d8fddbb

Please sign in to comment.