Leave feedback modal exceeds screen height

[AllieMendes]

Describe the bug
The modal for leaving feedback is too long and can exceed the window height, not allowing users to send their feedback or cancel the interaction through the button.

To Reproduce
Steps to reproduce the behavior:

1. I clicked on "Leave Feedback".
2. A modal opened and I couldn't see it all since it continued beyond my window height, with no way to scroll through it.

Expected behavior
I'd like to hear your thoughts!
Ideally, we want to have this more as a dropdown component on the page, which can be seen as we scroll through the page, but for now, it would be great to have a workaround.

Screenshots

Desktop

• OS: iOS
• Browser: Chrome
• Version: 119

[gokuljs]

@mlabouardy can you please assign me this .

[Azanul]

There you go @gokuljs! Do drop in to our Discord server in case you have any questions or need help

[AllieMendes]

Before tackling this, it would be great to discuss the solution, so I can support with the designs @gokuljs!

[gokuljs]

"I'm using a 16-inch Mac, and it works well. However, the issue arises when working with smaller screens. Here are a couple of workarounds I've thought of:

1: The best workaround, in my opinion, is to write the code in such a way that the modal takes up 80% of the screen's height.
This approach will make it look normal on larger screens, but on smaller screens, the entire modal will have an 80% height,
and it will become scrollable.

2: Another method I've considered is to shrink the height of the text area and make it scrollable. However, I don't think this is
a good idea because there is important content inside that users need to see."

[gokuljs]

for smaller screens

for bigger screens

[gokuljs]

if this workaround is good then i will create a pr for this @AllieMendes

[AllieMendes]

Thank you for the suggestions @gokuljs!
Having the whole modal scrollable is not the best experience as the user loses context of the action.

I explored this in my designs — having a static part for context on the modal and a scrollable part for the content and actions.

Would it be too difficult to implement?

[gokuljs]

basically you only want subsection to be scrollable right ?. the header and subtext should always be at the top

[AllieMendes]

basically you only want subsection to be scrollable right ?. the header and subtext should always be at the top

Yes, exactly (with a stroke in the middle to create the separation)

[gokuljs]

i see one more issue there is no cross icon at the top

[gokuljs]

if you have the exisiting figma file for this please share that would be really helpfull.

[AllieMendes]

We don't have a component on the Design System for the modal (the original design didn't use a modal at all) but I can invite you to Figma to see this screen exploration in particular — I would need your email for that

[gokuljs]

jsgokul123@gmail.com

[gokuljs]

does this look good @AllieMendes

[AllieMendes]

It's getting there!
The top margin should be the same for the scrollbar and the input field.
There should be a bigger margin between the scrollbar and the containers.

I've invited you to Figma, this design is isolated on the page Feedback Collection.

[gokuljs]

@AllieMendes this should be perfect right