Navigation: Add responsive behaviour to ToolbarButtonRow (#53739)

* hacky first attempt

* slightly cleaner...

* behaviour mostly working...

* remove unnecessary wrapper

* css tweaks

* much cleaner implementation with intersectionobserver

* set style props directly on children

* separate story, integrate when toggle is off

* improve story, integrate when toggle is on

* remove styles from DashNavTimeControls

* mock IntersectionObserver for all unit tests

* prettier

* don't use dropdown anymore

* add some basic documentation

* add right alignment to scenes toolbarbuttonrow

* just use the react children api to prevent duplicating children

public/app/features/explore/ExploreToolbar.tsx

@@ -3,14 +3,7 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { DataSourceInstanceSettings, RawTimeRange } from '@grafana/data';
 import { config, DataSourcePicker, reportInteraction } from '@grafana/runtime';
-import {
-  defaultIntervals,
-  PageToolbar,
-  RefreshPicker,
-  SetInterval,
-  ToolbarButton,
-  ToolbarButtonRow,
-} from '@grafana/ui';
+import { defaultIntervals, PageToolbar, RefreshPicker, SetInterval, ToolbarButton } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { createAndCopyShortLink } from 'app/core/utils/shortLinks';
 import { AccessControlAction } from 'app/types';
@@ -153,7 +146,7 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
             ),
           ].filter(Boolean)}
         >
-          <ToolbarButtonRow>
+          <>
             {!splitted ? (
               <ToolbarButton tooltip="Split the pane" onClick={() => split()} icon="columns" disabled={isLive}>
                 Split
@@ -216,7 +209,7 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
                 }}
               </LiveTailControls>
             )}
-          </ToolbarButtonRow>
+          </>
         </PageToolbar>
       </div>
     );