Nathalia make blue square description box bigger and auto-fit

[nathcarnevalli]

Description

Related PRS (if any):

This frontend PR is related to the dev backend PR.

Main changes explained:

• Created a function called adjustTextareaHeight which adjusts the height of the textarea dynamically based on its scroll height, ensuring it grows to fit the content as the user types.
• Set the minimum height of the textarea to 200 pixels to ensure it is taller by default, and added overflow hidden.

How to test:

1. Check into current branch.
2. Do npm install and npm run start:local to run this PR locally.
3. Clear site data/cache.
4. Log as admin/owner user.
5. Go to Dashboard→ User Profile→Blue Squares→Select a blue square (to edit or add a new one).
6. Ensure that the default height of the input field for the summary is 4x taller than before.
7. Add some text to the summary field and verify that the height of the field expands dynamically to fit the content.

Screenshots or videos of changes:

HGN.APP.-.Google.Chrome.2024-06-07.18-57-36.mp4

Note:

...

[jennZhang93]

Tested with owner account. Input field is 4x taller than before, and will auto fit when more lines of inputs are added. Good work!

[nishithaShetty]

Hi Nathalia, Good Work!
The functionality works as expected. The summary textbox is bigger than the original textbox. The textbox auto-adjusts its length to the contents added.
Attached the screenshots below.

[Parth-tech]

Hi Nathalia,
Everything looks good in the codebase but I would like to highlight that you are simply overwriting the same property on line 147 and 148. It will be better to get rid of the line 147 as it serves no purpose here.
Please let me know if I have interpreted it wrongly.
Thanks!

[tianyangL11]

When the content I enter changes, the height of the columns automatically adapts to the change in content, as shown here. Very nice!

[Parth-tech]

Hi Nathalia,
I have review your PR and the everything looks great. I have left a comment highlight a redundant code. The PR meets it's required functionality criteria i.e. the description text box for the blue square resizes itself to fit the entire text.

[cecilia-uu]

Good job! It works as you mentioned.

[jinxyou]

I checked the blue badge input field height. It seems the height and the auto-fit works fine. Great work!

[Logeshwari-Renu]

I have tested the PR and on editing summary field the height of text box expands dynamically to fit the content. Great Work!

[shradac]

Good job! The size of the Summary text box increases dynamically to fit the content.

[one-community]

Thank you all, merging!