custom select width and scrollbars (#1294)

Closes #1286, closes #1283

Scrollbar fix by @aleetsaiya

packages/desktop-client/src/components/common/CustomSelect.tsx

@@ -35,7 +35,7 @@ export default function CustomSelect({
         arrow={<ExpandArrow style={{ width: 7, height: 7, paddingTop: 3 }} />}
       />
       <ListboxPopover style={{ zIndex: 10000, outline: 0, borderRadius: 4 }}>
-        <ListboxList>
+        <ListboxList style={{ maxHeight: 250, overflowY: 'scroll' }}>
           {options.map(([value, label]) => (
             <ListboxOption
               key={value}

packages/desktop-client/src/components/reports/Header.js

@@ -91,7 +91,7 @@ function Header({
           }}
         >
           <CustomSelect
-            style={{ backgroundColor: 'white', width: 130 }}
+            style={{ backgroundColor: 'white' }}
             onChange={newValue =>
               onChangeDates(...validateStart(allMonths, newValue, end))
             }
@@ -100,7 +100,7 @@ function Header({
           />
           <View>to</View>
           <CustomSelect
-            style={{ backgroundColor: 'white', width: 130 }}
+            style={{ backgroundColor: 'white' }}
             onChange={newValue =>
               onChangeDates(...validateEnd(allMonths, start, newValue))
             }

upcoming-release-notes/1294.md

+---
+category: Bugfix
+authors: [MatissJanis, aleetsaiya]
+---
+
+Fix month picker responsiveness in reports page and make the select boxes scrollable