Explore: updates live button to responsive button

public/app/features/explore/ExploreToolbar.tsx

@@ -304,6 +304,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
                 <LiveTailControls exploreId={exploreId}>
                   {controls => (
                     <LiveTailButton
+                      splitted={splitted}
                       isLive={isLive}
                       isPaused={isPaused}
                       start={controls.start}

public/app/features/explore/LiveTailButton.tsx

@@ -4,6 +4,7 @@ import { css } from 'emotion';
 import memoizeOne from 'memoize-one';
 import tinycolor from 'tinycolor2';
 import { CSSTransition } from 'react-transition-group';
+import { ResponsiveButton } from './ResponsiveButton';
 
 import { GrafanaTheme, useTheme, Tooltip } from '@grafana/ui';
 
@@ -96,6 +97,7 @@ const defaultLiveTooltip = () => {
 };
 
 type LiveTailButtonProps = {
+  splitted: boolean;
   start: () => void;
   stop: () => void;
   pause: () => void;
@@ -104,7 +106,7 @@ type LiveTailButtonProps = {
   isPaused: boolean;
 };
 export function LiveTailButton(props: LiveTailButtonProps) {
-  const { start, pause, resume, isLive, isPaused, stop } = props;
+  const { start, pause, resume, isLive, isPaused, stop, splitted } = props;
   const theme = useTheme();
   const styles = getStyles(theme);
 
@@ -113,17 +115,17 @@ export function LiveTailButton(props: LiveTailButtonProps) {
   return (
     <>
       <Tooltip content={defaultLiveTooltip} placement="bottom">
-        <button
-          className={classNames('btn navbar-button', styles.liveButton, {
+        <ResponsiveButton
+          splitted={splitted}
+          buttonClassName={classNames('btn navbar-button', styles.liveButton, {
             [`btn--radius-right-0 ${styles.noRightBorderStyle}`]: isLive,
             [styles.isLive]: isLive && !isPaused,
             [styles.isPaused]: isLive && isPaused,
           })}
+          iconClassName={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')}
           onClick={onClickMain}
-        >
-          <i className={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')} />
-          <span>&nbsp; Live</span>
-        </button>
+          title={'\xa0Live'}
+        />
       </Tooltip>
       <CSSTransition
         mountOnEnter={true}