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/dashboard/components/DashNav/DashNav.tsx

@@ -6,7 +6,15 @@ import { useLocation } from 'react-router-dom';
 import { locationUtil, textUtil } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
 import { locationService } from '@grafana/runtime';
-import { ButtonGroup, ModalsController, ToolbarButton, PageToolbar, useForceUpdate, Tag } from '@grafana/ui';
+import {
+  ButtonGroup,
+  ModalsController,
+  ToolbarButton,
+  PageToolbar,
+  useForceUpdate,
+  Tag,
+  ToolbarButtonRow,
+} from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { NavToolbarSeparator } from 'app/core/components/AppChrome/NavToolbarSeparator';
 import config from 'app/core/config';
@@ -322,7 +330,7 @@ export const DashNav = React.memo<Props>((props) => {
           <>
             {renderLeftActions()}
             <NavToolbarSeparator leftActionsSeparator />
-            {renderRightActions()}
+            <ToolbarButtonRow alignment="right">{renderRightActions()}</ToolbarButtonRow>
           </>
         }
       />

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -4,7 +4,7 @@ import { Unsubscribable } from 'rxjs';
 
 import { dateMath, TimeRange, TimeZone } from '@grafana/data';
 import { TimeRangeUpdatedEvent } from '@grafana/runtime';
-import { defaultIntervals, RefreshPicker, ToolbarButtonRow } from '@grafana/ui';
+import { defaultIntervals, RefreshPicker } from '@grafana/ui';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 import { appEvents } from 'app/core/core';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
@@ -87,7 +87,7 @@ export class DashNavTimeControls extends Component<Props> {
     const hideIntervalPicker = dashboard.panelInEdit?.isEditing;
 
     return (
-      <ToolbarButtonRow>
+      <>
         <TimePickerWithHistory
           value={timePickerValue}
           onChange={this.onChangeTimePicker}
@@ -119,7 +119,7 @@ export class DashNavTimeControls extends Component<Props> {
           offOptionLabelMsg={t({ id: 'dashboard.refresh-picker.off-label', message: 'Off' })}
           offOptionAriaLabelMsg={t({ id: 'dashboard.refresh-picker.off-arialabel', message: 'Turn off auto refresh' })}
         />
-      </ToolbarButtonRow>
+      </>
     );
   }
 }