finished pop-up responsive deisgn

now working on the button

src/client/js/components/SlackNotification.jsx

@@ -40,7 +40,7 @@ class SlackNotification extends React.Component {
 
     return (
       <div className="grw-slack-notification w-100">
-        <div Style="height: 24px" className="input-group extended-setting">
+        <div className="grw-navbar-bottom-slack input-group extended-setting">
           <label className="input-group-addon">
             <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
               <input
@@ -55,8 +55,7 @@ class SlackNotification extends React.Component {
             </div>
           </label>
           <input
-            Style="height: 24px"
-            className="form-control align-top"
+            className="grw-navbar-bottom-slack form-control align-top"
             type="text"
             value={this.props.slackChannels}
             placeholder="Input channels"

src/client/styles/scss/molecules/slack-notification.scss

@@ -1,5 +1,5 @@
 .grw-slack-notification {
-  $input-height-slack: 1.8rem;
+  $input-height-slack: 24px;
   border-color: $gray-200;
 
   border-style: solid;
@@ -16,6 +16,11 @@
       width: 180px;
     }
   }
+  // height settings for slack button's responsive design
+  // in the input element
+  .grw-navbar-bottom-slack {
+    height: 24px;
+  }
 }
 //　TODO デザインの使用が確定して実装、本タスクのスコープ外
 // .grw-slack-notification-xd {