Fix extra padding in the bottom of the page for IE11 and Firefox (#1949)

* Remove icon height

* Icon alignment

* Center-align for tall send box

* Add entry

* Update snapshots

CHANGELOG.md

@@ -37,6 +37,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fix [#1920](https://github.com/Microsoft/BotFramework-WebChat/issues/1920). Added disabled property to send button, by [@tdurnford](https://github.com/tdurnford) in PR [#1922](https://github.com/Microsoft/BotFramework-WebChat/pull/1922)
 - Fix [#1525](https://github.com/Microsoft/BotFramework-WebChat/issues/1525). Add JavaScript error Offline UI, by [@corinagum](https://github.com/corinagum) in PR [#1927](https://github.com/Microsoft/BotFramework-WebChat/pull/1927)
 - Fix [#1934](https://github.com/Microsoft/BotFramework-WebChat/issues/1934). Fix spacing of empty ConnectivityStatus component, by [@corinagum](https://github.com/corinagum) in PR [#1939](https://github.com/Microsoft/BotFramework-WebChat/pull/1939)
+- Fix [#1943](https://github.com/Microsoft/BotFramework-WebChat/issues/1943). Fix extra vertical padding in IE11 and Firefox, by [@compulim](https://github.com/compulim) in PR [#XXX](https://github.com/Microsoft/BotFramework-WebChat/pull/XXX)
 
 ### Changed
 - Deployment: Bumps to [`blobxfer@1.7.1`](https://github.com/azure/blobxfer/), by [@compulim](https://github.com/compulim), in PR [#1897](https://github.com/Microsoft/BotFramework-WebChat/pull/1897)

packages/component/src/BasicSendBox.js

@@ -55,11 +55,13 @@ const BasicSendBox = ({
         :
           <TextBox className={ TEXT_BOX_CSS } />
       }
-      { (webSpeechPonyfill || {}).SpeechRecognition ?
-          <MicrophoneButton className={ MICROPHONE_BUTTON_CSS } />
-        :
-          <SendButton />
-      }
+      <div>
+        { (webSpeechPonyfill || {}).SpeechRecognition ?
+            <MicrophoneButton className={ MICROPHONE_BUTTON_CSS } />
+          :
+            <SendButton />
+        }
+      </div>
     </div>
   </div>
 

packages/component/src/SendBox/Assets/AttachmentIcon.js

@@ -1,20 +1,10 @@
-import { css } from 'glamor';
 import React from 'react';
 
-const ROOT_CSS = css({
-  height: 28,
-  overflow: 'hidden',
-  padding: 6,
-  width: 28
-});
-
 export default () =>
-  <div className={ ROOT_CSS }>
-    <svg
-      height={ 28 }
-      viewBox="0 0 25.75 46"
-      width={ 28 }
-    >
-      <path d="M20.75 11.75v21.37a7.69 7.69 0 0 1-.62 3.07 7.95 7.95 0 0 1-4.19 4.19 7.89 7.89 0 0 1-6.13 0 7.95 7.95 0 0 1-4.19-4.19 7.69 7.69 0 0 1-.62-3.07v-22.5a5.27 5.27 0 0 1 .45-2.17 5.69 5.69 0 0 1 3-3 5.48 5.48 0 0 1 4.35 0 5.69 5.69 0 0 1 3 3 5.27 5.27 0 0 1 .45 2.17v22.5a3.41 3.41 0 0 1-.26 1.32 3.31 3.31 0 0 1-1.8 1.8 3.46 3.46 0 0 1-2.63 0 3.31 3.31 0 0 1-1.8-1.8 3.41 3.41 0 0 1-.26-1.32V14h2.25v19.12a1.13 1.13 0 1 0 2.25 0v-22.5a3.4 3.4 0 0 0-.26-1.31 3.31 3.31 0 0 0-1.8-1.8 3.46 3.46 0 0 0-2.63 0 3.31 3.31 0 0 0-1.8 1.8 3.4 3.4 0 0 0-.26 1.31v22.5a5.32 5.32 0 0 0 .45 2.18 5.69 5.69 0 0 0 3 3 5.48 5.48 0 0 0 4.35 0 5.69 5.69 0 0 0 3-3 5.32 5.32 0 0 0 .45-2.18v-21.37z" clipRule="evenodd" />
-    </svg>
-  </div>
+  <svg
+    height={ 28 }
+    viewBox="0 0 25.75 46"
+    width={ 28 }
+  >
+    <path d="M20.75 11.75v21.37a7.69 7.69 0 0 1-.62 3.07 7.95 7.95 0 0 1-4.19 4.19 7.89 7.89 0 0 1-6.13 0 7.95 7.95 0 0 1-4.19-4.19 7.69 7.69 0 0 1-.62-3.07v-22.5a5.27 5.27 0 0 1 .45-2.17 5.69 5.69 0 0 1 3-3 5.48 5.48 0 0 1 4.35 0 5.69 5.69 0 0 1 3 3 5.27 5.27 0 0 1 .45 2.17v22.5a3.41 3.41 0 0 1-.26 1.32 3.31 3.31 0 0 1-1.8 1.8 3.46 3.46 0 0 1-2.63 0 3.31 3.31 0 0 1-1.8-1.8 3.41 3.41 0 0 1-.26-1.32V14h2.25v19.12a1.13 1.13 0 1 0 2.25 0v-22.5a3.4 3.4 0 0 0-.26-1.31 3.31 3.31 0 0 0-1.8-1.8 3.46 3.46 0 0 0-2.63 0 3.31 3.31 0 0 0-1.8 1.8 3.4 3.4 0 0 0-.26 1.31v22.5a5.32 5.32 0 0 0 .45 2.18 5.69 5.69 0 0 0 3 3 5.48 5.48 0 0 0 4.35 0 5.69 5.69 0 0 0 3-3 5.32 5.32 0 0 0 .45-2.18v-21.37z" clipRule="evenodd" />
+  </svg>

packages/component/src/SendBox/Assets/MicrophoneIcon.js

@@ -1,23 +1,10 @@
-import { css } from 'glamor';
-import classNames from 'classnames';
 import React from 'react';
 
-const ROOT_CSS = css({
-  height: 28,
-  overflow: 'hidden',
-  padding: 6,
-  width: 28
-});
-
-export default ({ className }) =>
-  <div
-    className={ classNames((className || '') + '', ROOT_CSS) }
+export default () =>
+  <svg
+    height={ 28 }
+    viewBox="0 0 34.75 46"
+    width={ 28 }
   >
-    <svg
-      height={ 28 }
-      viewBox="0 0 34.75 46"
-      width={ 28 }
-    >
-      <path className="a" d="M29.75,23v6.36a7,7,0,0,1-.56,2.78,7.16,7.16,0,0,1-3.8,3.8,7,7,0,0,1-2.78.56H18.5v2.25H23V41H11.75v-2.25h4.5V36.5h-4.11a7,7,0,0,1-2.78-.56,7.16,7.16,0,0,1-3.8-3.8,7,7,0,0,1-.56-2.78V23h2.25v6.36a4.72,4.72,0,0,0,.39,1.9,4.78,4.78,0,0,0,2.6,2.6,4.72,4.72,0,0,0,1.9.39h10.47a4.72,4.72,0,0,0,1.9-.39,4.78,4.78,0,0,0,2.6-2.6,4.72,4.72,0,0,0,.39-1.9V23Zm-18,5.62a1.13,1.13,0,0,0,1.13,1.13h9a1.13,1.13,0,0,0,1.12-1.13V8.38a1.13,1.13,0,0,0-1.12-1.13h-9a1.13,1.13,0,0,0-1.13,1.13Zm1.13,3.38a3.41,3.41,0,0,1-1.32-.26,3.31,3.31,0,0,1-1.8-1.8,3.41,3.41,0,0,1-.26-1.32V8.38a3.41,3.41,0,0,1,.26-1.32,3.31,3.31,0,0,1,1.8-1.8,3.41,3.41,0,0,1,1.32-.26h9a3.4,3.4,0,0,1,1.31.26,3.31,3.31,0,0,1,1.8,1.8,3.41,3.41,0,0,1,.26,1.32v20.24a3.41,3.41,0,0,1-.26,1.32,3.31,3.31,0,0,1-1.8,1.8,3.4,3.4,0,0,1-1.31.26Z" />
-    </svg>
-  </div>
+    <path className="a" d="M29.75,23v6.36a7,7,0,0,1-.56,2.78,7.16,7.16,0,0,1-3.8,3.8,7,7,0,0,1-2.78.56H18.5v2.25H23V41H11.75v-2.25h4.5V36.5h-4.11a7,7,0,0,1-2.78-.56,7.16,7.16,0,0,1-3.8-3.8,7,7,0,0,1-.56-2.78V23h2.25v6.36a4.72,4.72,0,0,0,.39,1.9,4.78,4.78,0,0,0,2.6,2.6,4.72,4.72,0,0,0,1.9.39h10.47a4.72,4.72,0,0,0,1.9-.39,4.78,4.78,0,0,0,2.6-2.6,4.72,4.72,0,0,0,.39-1.9V23Zm-18,5.62a1.13,1.13,0,0,0,1.13,1.13h9a1.13,1.13,0,0,0,1.12-1.13V8.38a1.13,1.13,0,0,0-1.12-1.13h-9a1.13,1.13,0,0,0-1.13,1.13Zm1.13,3.38a3.41,3.41,0,0,1-1.32-.26,3.31,3.31,0,0,1-1.8-1.8,3.41,3.41,0,0,1-.26-1.32V8.38a3.41,3.41,0,0,1,.26-1.32,3.31,3.31,0,0,1,1.8-1.8,3.41,3.41,0,0,1,1.32-.26h9a3.4,3.4,0,0,1,1.31.26,3.31,3.31,0,0,1,1.8,1.8,3.41,3.41,0,0,1,.26,1.32v20.24a3.41,3.41,0,0,1-.26,1.32,3.31,3.31,0,0,1-1.8,1.8,3.4,3.4,0,0,1-1.31.26Z" />
+  </svg>

packages/component/src/SendBox/Assets/SendIcon.js

@@ -1,20 +1,10 @@
-import { css } from 'glamor';
 import React from 'react';
 
-const ROOT_CSS = css({
-  height: 28,
-  overflow: 'hidden',
-  padding: 6,
-  width: 28
-});
-
 export default () =>
-  <div className={ ROOT_CSS }>
-    <svg
-      height={ 28 }
-      viewBox="0 0 45.7 33.8"
-      width={ 28 }
-    >
-      <path d="M8.55 25.25l21.67-7.25H11zm2.41-9.47h19.26l-21.67-7.23zm-6 13l4-11.9L5 5l35.7 11.9z" clipRule="evenodd" />
-    </svg>
-  </div>
+  <svg
+    height={ 28 }
+    viewBox="0 0 45.7 33.8"
+    width={ 28 }
+  >
+    <path d="M8.55 25.25l21.67-7.25H11zm2.41-9.47h19.26l-21.67-7.23zm-6 13l4-11.9L5 5l35.7 11.9z" clipRule="evenodd" />
+  </svg>

packages/component/src/SendBox/SendButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import { localize } from '../Localization/Localize';
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
-import { localize } from '../Localization/Localize';
 import SendIcon from './Assets/SendIcon';
 
 const connectSendButton = (...selectors) => connectToWebChat(
@@ -27,15 +27,13 @@ const connectSendButton = (...selectors) => connectToWebChat(
 
 export default connectSendButton()(
   ({ click, disabled, language }) =>
-    <div>
-      <IconButton
-        alt={ localize('Send', language) }
-        disabled={ disabled }
-        onClick={ click }
-      >
-        <SendIcon />
-      </IconButton>
-    </div>
+    <IconButton
+      alt={ localize('Send', language) }
+      disabled={ disabled }
+      onClick={ click }
+    >
+      <SendIcon />
+    </IconButton>
 )
 
 export { connectSendButton }

packages/component/src/SendBox/UploadButton.js

@@ -55,7 +55,7 @@ class UploadButton extends React.Component {
     this.inputRef = React.createRef();
   }
 
-  handleClick(event) {
+  handleClick() {
     const { current } = this.inputRef;
 
     current && current.click();

packages/component/src/Styles/StyleSet/SendBox.js

@@ -8,6 +8,7 @@ export default function createSendBoxStyle({
 }) {
   return {
     '& > .main': {
+      alignItems: 'stretch',
       backgroundColor: sendBoxBackground,
       borderBottom: sendBoxBorderBottom,
       borderLeft: sendBoxBorderLeft,