Scrollbar displayed even when element is not overflowing

[obulat]

Description

Setting overflow to scroll instead of auto makes Windows browsers display the scrollbar even if the content is not scrollable (browsers on MacOS hide it)

Reproduction

1. Open the website on a Windows computer
2. See scrollbars on the homepage and on external sources modal.

Screenshots

Environment

• OS: Windows

Additional context

To fix the issue, the following lines need to change:

openverse/frontend/src/layouts/default.vue

Line 17 in b0ac47d

<div class="main-content flex flex-grow flex-col overflow-y-scroll">

Replace overflow-y-scroll with overflow-y-auto.

openverse/frontend/src/components/VModal/VModalContent.vue

Lines 229 to 230 in b0ac47d

	max-height: calc(100vh - var(--modal-header-height, 0) - 6rem);
	overflow-y: scroll;

Replace scroll with auto

[Anuj012004]

Hi, I’d like to work on this issue. Is it okay if I take this up?
Please let me know if there are any guidelines or additional details.

[dhruvkb]

Yes @Anuj012004! Please go ahead, I'll assign this to you.

[CoDinAIy]

Hello, has this issue been resolved yet? I am able to make a PR immediately if you approve. @WordPress/openverse-maintainers

Thanks

[dhruvkb]

@CoDinAIy thanks for your interest in this issue, and I appreciate you stepping back to give @Anuj012004 the chance to complete the task they've requested. You can look at the list of good first issues to see if there are any other issues that you can help with.

[CoDinAIy]

Hi @dhruvkb I shall take a look tomorrow, thank you.