[Bug]: Reports Month Dropdown Menus

[carkom]

Verified issue does not already exist?

• I have searched and found no existing issue

What happened?

The box border has no radius on it.

Also the menus are showing horizontal scroll bars when they are no needed. I'm on a wide screen monitor with plenty of space for wider menus on this element. They should auto adjust the content so this doesn't happen.

What error did you receive?

No response

Where are you hosting Actual?

None

What browsers are you seeing the problem on?

Firefox, Chrome

Operating System

Windows 10

[syukronrm]

Hi @carkom, is this issue persist on your environment at the latest actual release?

[carkom]

Yes, still shows horizontal scroll bars. Checked other browsers. I've noticed the issue is not present in Chrome but only exists in firefox.

[miqh]

@carkom,

Applying scrollbar-gutter: stable to the ListboxList usages inside the common Select component should resolve the unwanted scroll bar overlay in Firefox and have it positioned like it would be in Chromium browsers.

actual/packages/desktop-client/src/components/common/Select.tsx

Line 118 in 5fe146e

<ListboxList style={{ maxHeight: 250, overflowY: 'auto' }}>

However, at this time of writing, a quick web search would suggest some ongoing implementation issues raised by users regarding that CSS property.

https://caniuse.com/mdn-css_properties_scrollbar-gutter

And if Safari is of concern, the property isn't supported at all. I don't have access to any devices to observe what currently happens there.

[lelemm]

@carkom , is this persists?
tried on the latest firefox and chrome, no problems:

firefox:

chrome:

[carkom]

I just checked it on Firefox again and the issue has been resolved somewhere along the way. Thanks!