From 324063eb3d23026a8afcab5bbb9dab56843f0d11 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 21 Oct 2024 12:06:44 +0100
Subject: [PATCH] SingleTopNav: Fix positioning of command palette (#95041)

fix positioning of command palette when singleTopNav is enabled
---
 public/app/features/commandPalette/CommandPalette.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx
index 1125ce7ae6d..35cfa8d0fdd 100644
--- a/public/app/features/commandPalette/CommandPalette.tsx
+++ b/public/app/features/commandPalette/CommandPalette.tsx
@@ -28,7 +28,8 @@ import { CommandPaletteAction } from './types';
 import { useMatches } from './useMatches';
 
 export function CommandPalette() {
-  const styles = useStyles2(getSearchStyles);
+  const lateralSpace = getCommandPalettePosition();
+  const styles = useStyles2(getSearchStyles, lateralSpace);
 
   const { query, showing, searchQuery } = useKBar((state) => ({
     showing: state.visualState === VisualState.showing,
@@ -86,7 +87,8 @@ interface RenderResultsProps {
 
 const RenderResults = ({ isFetchingSearchResults, searchResults }: RenderResultsProps) => {
   const { results: kbarResults, rootActionId } = useMatches();
-  const styles = useStyles2(getSearchStyles);
+  const lateralSpace = getCommandPalettePosition();
+  const styles = useStyles2(getSearchStyles, lateralSpace);
   const dashboardsSectionTitle = t('command-palette.section.dashboard-search-results', 'Dashboards');
   const foldersSectionTitle = t('command-palette.section.folder-search-results', 'Folders');
   // because dashboard search results aren't registered as actions, we need to manually
@@ -155,8 +157,7 @@ const getCommandPalettePosition = () => {
   return lateralSpace;
 };
 
-const getSearchStyles = (theme: GrafanaTheme2) => {
-  const lateralSpace = getCommandPalettePosition();
+const getSearchStyles = (theme: GrafanaTheme2, lateralSpace: number) => {
   const isSingleTopNav = config.featureToggles.singleTopNav;
 
   return {