Fix responsiveness on small window size for modal windows

[kkosiorowska]

Closes https://github.com/thesis/acre/issues/650 Closes https://github.com/thesis/acre/issues/621 Ref https://github.com/thesis/acre/issues/757

This PR improves responsiveness on small window size for modal windows. What has been done:

• Set scrolling behavior for the modal outside

• Make the scrollbar visible when the sidebar is open.

  The sidebar has a higher z-index than the modal. When the scrollbar appears for the modal window it is covered by the sidebar. Therefore, we should check when the scrollbar is visible and then set the position of the Sidebar correctly.

  Note that we can not change the z-index for the Sidebar because the container for the modal window covers all window and will not allow a user to click on the element.

https://github.com/user-attachments/assets/7820e1ad-f0c2-426b-95d5-d113cbac36b5

[netlify[bot]]

✅ Deploy Preview for acre-dapp ready!

Name	Link
🔨 Latest commit	3562bbcfc4395f5395b454998d3f8066beab0e2e
🔍 Latest deploy log	https://app.netlify.com/sites/acre-dapp/deploys/67123045f664c00008cf7afa
😎 Deploy Preview	https://deploy-preview-766--acre-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for acre-dapp-testnet ready!

Name	Link
🔨 Latest commit	3562bbcfc4395f5395b454998d3f8066beab0e2e
🔍 Latest deploy log	https://app.netlify.com/sites/acre-dapp-testnet/deploys/671230451e28b100089f7301
😎 Deploy Preview	https://deploy-preview-766--acre-dapp-testnet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[r-czajkowski]

I noticed that I can't scroll when the sidebar element is focused. Also I can't use the scrollbar because it's only visible when I scroll.

https://github.com/user-attachments/assets/03c01657-adf6-49c3-97a2-af55eb914ed5

[kkosiorowska]

I noticed that I can't scroll when the sidebar element is focused.

I honestly don't know how we can fix it and whether it can be done at all. 🤔 This is definitely a topic for more investigation.

Also I can't use the scrollbar because it's only visible when I scroll.

I think it is caused by your system settings. But I noticed that when not displaying the scrollbar on the Mac the margin is not set correctly. But I think that we can't do anything about it.

Anyway, I created a task to look into it. - https://github.com/thesis/acre/issues/770