babel / website

:globe_with_meridians: The Babel documentation website
https://babeljs.io/docs/en/index.html
MIT License
750 stars 1.32k forks source link

fix : "Get browser-compatible JavaScript out" Scrollbar Not working #2890

Open prajyot004 opened 4 months ago

prajyot004 commented 4 months ago

Description

Fixed the issue of horizontal scrolling in homepage mini editor. Horizontal scroll was not working. I have linked the both videos of after and before fix.

Fixes : #2855

Before fix

https://github.com/babel/website/assets/75519731/f3f602ca-b84e-4aff-8d54-4b60f42c5f81

After fix

https://github.com/babel/website/assets/75519731/65cabac9-6864-4612-96ab-7a1a57cf1e0d

netlify[bot] commented 4 months ago

Deploy request for babel-next pending review.

Visit the deploys page to approve it

Name Link
Latest commit 603907de3b6746454596cba835fb070925b04c02
netlify[bot] commented 4 months ago

Deploy Preview for babel ready!

Built without sensitive environment variables

Name Link
Latest commit 603907de3b6746454596cba835fb070925b04c02
Latest deploy log https://app.netlify.com/sites/babel/deploys/6641e4a300e3a10008cbf856
Deploy Preview https://deploy-preview-2890--babel.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

prajyot004 commented 4 months ago

I'll try to do that

prajyot004 commented 4 months ago

@nicolo-ribaudo I looked for solution but there are only two ways either we need to keep the output window selectable not editable OR always keep the horizontalscrollbars visible. And on top of it we are keeping the error message window there only we are just change its opacity to 1 when error occurs the place is still occupied by error div so it is making conflicts between scrollbar and error div. As of now "ace editor" does not provide the property to focus on the scroll bar so there are only two possible solutions.