adjust layout for SlackNotification

src/client/js/components/SlackNotification.jsx

@@ -39,32 +39,33 @@ class SlackNotification extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="input-group input-group-sm input-group-slack extended-setting">
-        <label className="input-group-addon bg-light">
-          <img id="slack-mark-white" alt="slack-mark" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18" />
-          <img id="slack-mark-black" alt="slack-mark" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18" />
+      <div className="grw-slack-notification">
+        <div className="input-group input-group-sm extended-setting">
+          <label className="input-group-addon bg-light">
+            <img id="slack-mark-white" alt="slack-mark" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18" />
+            <img id="slack-mark-black" alt="slack-mark" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18" />
 
-          <input
-            type="checkbox"
-            value="1"
-            checked={this.props.isSlackEnabled}
-            onChange={this.updateCheckboxHandler}
-          />
+            <input
+              type="checkbox"
+              value="1"
+              checked={this.props.isSlackEnabled}
+              onChange={this.updateCheckboxHandler}
+            />
 
-        </label>
-        <input
-          className="form-control"
-          type="text"
-          value={this.props.slackChannels}
-          placeholder="slack channel name"
-          data-toggle="popover"
+          </label>
+          <input
+            className="form-control"
+            type="text"
+            value={this.props.slackChannels}
+            placeholder="Input channels"
+            data-toggle="popover"
             title={t('slack_notification.popover_title')}
             data-content={t('slack_notification.popover_desc')}
-          data-trigger="focus"
-          data-placement="top"
-          onChange={this.updateSlackChannelsHandler}
-        />
-      </div>
+            data-trigger="focus"
+            data-placement="top"
+            onChange={this.updateSlackChannelsHandler}
+          />
+        </div>
       </div>
     );
   }

src/client/styles/scss/_notification.scss

@@ -1,11 +0,0 @@
-// Slack
-.input-group-slack {
-  .input-group-addon {
-    padding: 2px 8px;
-    line-height: 1em;
-    img,
-    input {
-      vertical-align: middle;
-    }
-  }
-}

src/client/styles/scss/_on-edit.scss

@@ -122,6 +122,26 @@ body.on-edit {
   .grw-editor-navbar-bottom {
     height: $grw-editor-navbar-bottom-height;
 
+    .grw-slack-notification {
+      .input-group-addon {
+        padding: 2px 8px;
+        line-height: 1em;
+        img,
+        input {
+          vertical-align: middle;
+        }
+      }
+      .form-control {
+        width: 80px;
+        @include media-breakpoint-up(sm) {
+          width: 130px;
+        }
+        @include media-breakpoint-up(md) {
+          width: 180px;
+        }
+      }
+    }
+
     .grw-grant-selector {
       @include media-breakpoint-down(sm) {
         .btn .label {

src/client/styles/scss/style-app.scss

@@ -45,7 +45,6 @@
 @import 'mirror_mode';
 @import 'navbar';
 @import 'navbar_kibela';
-@import 'notification';
 @import 'on-edit';
 @import 'page_list';
 @import 'page-path';