configuring looks

src/client/js/components/PageEditor/EditorNavbarBottom.jsx

@@ -49,16 +49,12 @@ const EditorNavbarBottom = (props) => {
     <div className={`${isCollapsedOptionsSelectorEnabled ? 'fixed-bottom' : ''} `}>
       {/* Collapsed SlackNotification */}
       { isSlackExpanded && (
-        <Collapse isOpen={isSlackExpanded}>
-          <div className="px-2"> {/* set padding for border-top */}
-            <div className={`navbar navbar-expand border-top px-0 ${additionalClasses.join(' ')}`}>
-              <form className="form-inline ml-auto">
-                <SavePageControls
-                  isDeviceSmallerThanMd={false}
-                  slackOnly
-                />
-              </form>
-            </div>
+        <Collapse className="align-middle" isOpen={isSlackExpanded && isDeviceSmallerThanMd}>
+          <div className={`overflow-auto navbar border-top px-0 ${additionalClasses.join(' ')}`}>
+            <SavePageControls
+              isDeviceSmallerThanMd={false}
+              slackOnly
+            />
           </div>
         </Collapse>
         )}

src/client/js/components/SavePageControls.jsx

@@ -83,23 +83,15 @@ class SavePageControls extends React.Component {
     const labelSubmitButton = pageContainer.state.pageId == null ? t('Create') : t('Update');
     const labelOverwriteScopes = t('page_edit.overwrite_scopes', { operation: labelSubmitButton });
 
-    if (this.props.slackOnly) {
+    if (this.hasSlackConfig && this.props.slackOnly) {
       return (
-        <div className="d-flex align-items-center form-inline">
-          {this.hasSlackConfig
-            && (
-              <div className="mr-2">
-                <SlackNotification
-                  isSlackEnabled={editorContainer.state.isSlackEnabled}
-                  slackChannels={editorContainer.state.slackChannels}
-                  onEnabledFlagChange={this.slackEnabledFlagChangedHandler}
-                  onChannelChange={this.slackChannelsChangedHandler}
-                />
-              </div>
-            )
-          }
-        </div>
-
+        <SlackNotification
+          isSlackEnabled={editorContainer.state.isSlackEnabled}
+          slackChannels={editorContainer.state.slackChannels}
+          onEnabledFlagChange={this.slackEnabledFlagChangedHandler}
+          onChannelChange={this.slackChannelsChangedHandler}
+          id="idForSavePageControl"
+        />
       );
     }
     return (
@@ -114,6 +106,7 @@ class SavePageControls extends React.Component {
                   onChannelChange={this.slackChannelsChangedHandler}
                   click={this.props.click}
                   smallScreen={this.props.smallScreen}
+                  id="idForSavePageControl"
                 />
               </div>
             )

src/client/js/components/SlackNotification.jsx

@@ -39,7 +39,7 @@ class SlackNotification extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="grw-slack-notification">
+      <div className="grw-slack-notification w-100">
         <div className="input-group extended-setting">
           <label className="input-group-addon">
             <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
@@ -83,9 +83,11 @@ affect the rendering of the banner itself.
     return (
       <div className="grw-slack-notification">
         <button
+          // className="grw-slack-notification-button"
           type="button"
           onClick={this.props.click}
         >
+          slacks
           <i className="icon-arrow-up"></i>
         </button>
       </div>