From 79f588d067f1f9fdca84ecde0fdb8cd121a832bd Mon Sep 17 00:00:00 2001
From: Akos Kitta <kittaakos@typefox.io>
Date: Thu, 5 Dec 2019 10:18:33 +0100
Subject: [PATCH] Finalized the styling for react-select

Signed-off-by: Akos Kitta <kittaakos@typefox.io>
---
 .../src/browser/components/arduino-select.tsx      |  6 +-----
 .../src/browser/monitor/monitor-widget.tsx         | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/arduino-ide-extension/src/browser/components/arduino-select.tsx b/arduino-ide-extension/src/browser/components/arduino-select.tsx
index 83b8ced2..fdba128b 100644
--- a/arduino-ide-extension/src/browser/components/arduino-select.tsx
+++ b/arduino-ide-extension/src/browser/components/arduino-select.tsx
@@ -11,7 +11,6 @@ export class ArduinoSelect<T> extends Select<T> {
     }
 
     render(): React.ReactNode {
-        const { defaultValue, onChange, options, className } = this.props;
         const height = 25;
         const styles: Styles = {
             control: styles => ({
@@ -51,14 +50,11 @@ export class ArduinoSelect<T> extends Select<T> {
         });
         const DropdownIndicator = () => <span className='fa fa-caret-down caret' />;
         return <Select
-            options={options}
-            defaultValue={defaultValue}
-            onChange={onChange}
+            {...this.props}
             components={{ DropdownIndicator }}
             theme={theme}
             styles={styles}
             classNamePrefix='arduino-select'
-            className={className}
             isSearchable={false}
         />
     }
diff --git a/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx b/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
index e0892fe8..3204357d 100644
--- a/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
+++ b/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
@@ -124,8 +124,18 @@ export class MonitorWidget extends ReactWidget {
                     <SerialMonitorSendField onSend={this.onSend} />
                 </div>
                 <div className='config'>
-                    <ArduinoSelect className='serial-monitor-select' options={lineEndings} defaultValue={lineEnding} onChange={this.onChangeLineEnding} />
-                    <ArduinoSelect className='serial-monitor-select' options={baudRates} defaultValue={baudRate} onChange={this.onChangeBaudRate} />
+                    <ArduinoSelect
+                        className='serial-monitor-select'
+                        maxMenuHeight={this.widgetHeight - 40}
+                        options={lineEndings}
+                        defaultValue={lineEnding}
+                        onChange={this.onChangeLineEnding} />,
+                    <ArduinoSelect
+                        className='serial-monitor-select'
+                        maxMenuHeight={this.widgetHeight - 40}
+                        options={baudRates}
+                        defaultValue={baudRate}
+                        onChange={this.onChangeBaudRate} />
                 </div>
             </div>
             <div id='serial-monitor-output-container'>