From 6cc3c2df95aa0bd8855e349c168a89494f5581ed Mon Sep 17 00:00:00 2001
From: mlorb <mlorber@biosistemika.com>
Date: Thu, 12 Oct 2017 14:45:08 +0200
Subject: [PATCH 1/2] fixes time zone styling

---
 .../preferences/components/InputTimezone.jsx  | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/app/javascript/src/scenes/SettingsPage/scenes/preferences/components/InputTimezone.jsx b/app/javascript/src/scenes/SettingsPage/scenes/preferences/components/InputTimezone.jsx
index 1dc3cf290..35dcc4531 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/preferences/components/InputTimezone.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/preferences/components/InputTimezone.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { string, func } from "prop-types";
-import { Button } from "react-bootstrap";
+import { Button, ButtonToolbar } from "react-bootstrap";
 import styled from "styled-components";
 import TimezonePicker from "react-bootstrap-timezone-picker";
 import "react-bootstrap-timezone-picker/dist/react-bootstrap-timezone-picker.min.css";
@@ -22,6 +22,10 @@ const Wrapper = styled.div`
   .settings-warning {
     margin-bottom: 15px;
   }
+
+  .timezone-picker {
+    display: block;
+  }
 `;
 
 const WrapperInputDisabled = styled.div`
@@ -34,6 +38,13 @@ const WrapperInputDisabled = styled.div`
   }
 `;
 
+const StyledTimezonePicker = styled(TimezonePicker)`
+  .timezone-picker-list {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+`;
+
 class InputTimezone extends Component {
   constructor(props) {
     super(props);
@@ -94,7 +105,7 @@ class InputTimezone extends Component {
         <h4>
           <FormattedMessage id="settings_page.time_zone" />
         </h4>
-        <TimezonePicker
+        <StyledTimezonePicker
           absolute
           defaultValue="Europe/London"
           value={this.state.value}
@@ -106,12 +117,14 @@ class InputTimezone extends Component {
             <FormattedMessage id="settings_page.time_zone_warning" />
           </small>
         </div>
-        <Button bsStyle="primary" onClick={this.disableEdit}>
-          <FormattedMessage id="general.cancel" />
-        </Button>
-        <Button bsStyle="default" onClick={this.handleUpdate}>
-          <FormattedMessage id="general.update" />
-        </Button>
+        <ButtonToolbar>
+          <Button bsStyle="primary" onClick={this.handleUpdate}>
+            <FormattedMessage id="general.update" />
+          </Button>
+          <Button bsStyle="default" onClick={this.disableEdit}>
+            <FormattedMessage id="general.cancel" />
+          </Button>
+        </ButtonToolbar>
       </Wrapper>
     );
   }

From ed80d849aa29d9b4a410e0f7f81456d0c28c8247 Mon Sep 17 00:00:00 2001
From: mlorb <mlorber@biosistemika.com>
Date: Thu, 12 Oct 2017 14:54:40 +0200
Subject: [PATCH 2/2] remove double css file import and move data-tables style
 to the component

---
 app/javascript/packs/styles.scss                   | 1 -
 app/javascript/src/components/data_table/index.jsx | 9 +++++++++
 app/javascript/src/styles/main.scss                | 9 ---------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/javascript/packs/styles.scss b/app/javascript/packs/styles.scss
index 7cea8637f..431483806 100644
--- a/app/javascript/packs/styles.scss
+++ b/app/javascript/packs/styles.scss
@@ -3,7 +3,6 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
 
 @import "~bootstrap-sass/assets/stylesheets/bootstrap";
 @import "~font-awesome/scss/font-awesome";
-@import "react-bootstrap-timezone-picker/dist/react-bootstrap-timezone-picker.min.css";
 @import "~react-bootstrap-table/dist/react-bootstrap-table.min";
 @import "react-tagsinput/react-tagsinput.css";
 
diff --git a/app/javascript/src/components/data_table/index.jsx b/app/javascript/src/components/data_table/index.jsx
index d09141641..45a4b05f5 100644
--- a/app/javascript/src/components/data_table/index.jsx
+++ b/app/javascript/src/components/data_table/index.jsx
@@ -54,6 +54,15 @@ const StyledBootstrapTable = styled(BootstrapTable)`
       display: inline-block !important;
     }
   }
+
+  // fixes issue with dropdown in datatable
+  .react-bootstrap-table-dropdown-fix {
+    overflow: inherit !important;
+  }
+
+  .react-bs-container-body {
+    overflow: inherit !important;
+  }
 `;
 
 class DataTable extends Component {
diff --git a/app/javascript/src/styles/main.scss b/app/javascript/src/styles/main.scss
index 86bcdf9f8..fa4d592e1 100644
--- a/app/javascript/src/styles/main.scss
+++ b/app/javascript/src/styles/main.scss
@@ -48,15 +48,6 @@ body {
   }
 }
 
-// // fixes issue with dropdown in datatable
-.react-bootstrap-table-dropdown-fix {
-  overflow: inherit !important;
-}
-
-.react-bs-container-body {
-  overflow: inherit !important;
-}
-
 // tags input
 .react-tagsinput--focused {
   border-color: $color-theme-primary;