SingleTopNav: align Command Palette to the input (#94614)

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -381,6 +381,7 @@ export const Components = {
   },
   NavToolbar: {
     container: 'data-testid Nav toolbar',
+    commandPaletteTrigger: 'data-testid Command palette trigger',
     shareDashboard: 'data-testid Share dashboard',
     markAsFavorite: 'data-testid Mark as favorite',
     editDashboard: {

public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx

@@ -3,6 +3,7 @@ import { useKBar, VisualState } from 'kbar';
 import { useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
 import { getInputStyles, Icon, Text, ToolbarButton, useStyles2, useTheme2 } from '@grafana/ui';
 import { focusCss } from '@grafana/ui/src/themes/mixins';
@@ -60,7 +61,7 @@ function PretendTextInput({ onClick }: PretendTextInputProps) {
   // action. You don't actually type into it.
 
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} data-testid={selectors.components.NavToolbar.commandPaletteTrigger}>
       <div className={styles.inputWrapper}>
         <div className={styles.prefix}>
           <Icon name="search" />

public/app/features/commandPalette/CommandPalette.tsx

@@ -15,7 +15,8 @@ import {
 import { useEffect, useMemo, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { selectors } from '@grafana/e2e-selectors';
+import { config, reportInteraction } from '@grafana/runtime';
 import { EmptyState, Icon, LoadingBar, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
@@ -146,7 +147,18 @@ const RenderResults = ({ isFetchingSearchResults, searchResults }: RenderResults
   );
 };
 
+const getCommandPalettePosition = () => {
+  const input = document.querySelector(`[data-testid="${selectors.components.NavToolbar.commandPaletteTrigger}"]`);
+  const inputRightPosition = input?.getBoundingClientRect().right ?? 0;
+  const screenWidth = document.body.clientWidth;
+  const lateralSpace = screenWidth - inputRightPosition;
+  return lateralSpace;
+};
+
 const getSearchStyles = (theme: GrafanaTheme2) => {
+  const lateralSpace = getCommandPalettePosition();
+  const isSingleTopNav = config.featureToggles.singleTopNav;
+
   return {
     positioner: css({
       zIndex: theme.zIndex.portal,
@@ -164,14 +176,23 @@ const getSearchStyles = (theme: GrafanaTheme2) => {
       },
     }),
     animator: css({
-      maxWidth: theme.breakpoints.values.md,
       width: '100%',
+      maxWidth: theme.breakpoints.values.md,
       background: theme.colors.background.primary,
       color: theme.colors.text.primary,
       borderRadius: theme.shape.radius.default,
       border: `1px solid ${theme.colors.border.weak}`,
       overflow: 'hidden',
       boxShadow: theme.shadows.z3,
+      ...(isSingleTopNav && {
+        [theme.breakpoints.up('lg')]: {
+          position: 'fixed',
+          right: lateralSpace,
+          left: lateralSpace,
+          maxWidth: 'unset',
+          width: 'unset',
+        },
+      }),
     }),
     loadingBarContainer: css({
       position: 'absolute',