Limit scrollbar height in overlays

[danieldegroot2]

URL

No response

How to reproduce the issue?

Limit the height of the scrollbar in the (i.e. Custom Layer and Keyboard Shortcuts) overlay to the bottom of the header, as it is for other menu tabs.

Screenshot(s) or anything else?

Which deployed environments do you see the issue in?

Released version at openstreetmap.org/edit, Development version at ideditor.netlify.app, RapiD version at mapwith.ai/rapid

What version numbers does this issue effect?

2.30.4, 2.31.0-dev, RapiD 2.4.3

Which browsers are you seeing this problem on?

Chrome

[kartik-212004]

Can you please tell me more about this issue? I'm interested in working on it and would appreciate being assigned to it.

[tyrasd]

@kartik-212004 sure, give it a shot!

[Deeptanshu-sankhwar]

I have reproduced the issue. Please let me know if you're still working on it @kartik-212004, if not then I'd raise a PR 😊

[kartik-212004]

Yeah sure u can do this issue, i am engaged with my uni exams

[Deeptanshu-sankhwar]

Hi @danieldegroot2 @tyrasd I reorganized the modal structure in both uiConfirm and uiShortcuts by introducing a content-wrapper to group scrollable content and buttons under a single parent. Scoped scrolling was applied to the content-wrapper with dynamic height adjustments using CSS to ensure the header and footer remain static while maintaining responsiveness. This approach resolves layout and overlapping issues in the modal. Please let me know your thoughts on it whenever you can.
Thanks

[Deeptanshu-sankhwar]

Screen.Recording.2024-12-19.at.10.51.43.PM.mov

Attaching a small clip here to show how it results out to be

[Darshit42]

hi @Deeptanshu-sankhwar , i want to help contribute in this issue , can you please tell me where did you start from , you can give me some minor changes and you can raise the final pr (are you on slack/discord it'll be great if you explain in brief 😅)

[Deeptanshu-sankhwar]

Sure @Darshit42 , although I've raised the PR for now, but I'll fill you in on any feedback! Yes, I am on OSM slack, you can find me on #dev channel

[sahitya-chandra]

Hey @Deeptanshu-sankhwar, I was also contributing to the same issue but I was unable to understand the file structure of the repo because I generally code in react. Can you help me with some doubts ?? whenever you are free.
Please tell me where we can connect.

[Deeptanshu-sankhwar]

I am not a maintainer or an early contributor for the project @sahitya-chandra, but I'll try to help and discuss in the best capacity I can. You can find me on OSM slack, on most of channels, like #dev channel