From f79f7ac33dc569e2e311291109da1e9105dd0149 Mon Sep 17 00:00:00 2001
From: Aleksandar Petrov <8142643+aleks-p@users.noreply.github.com>
Date: Wed, 14 Jan 2026 09:31:23 -0400
Subject: [PATCH] Move extra header elements to the right

---
 packages/grafana-flamegraph/src/FlameGraphHeader.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-flamegraph/src/FlameGraphHeader.tsx b/packages/grafana-flamegraph/src/FlameGraphHeader.tsx
index 2380bda2910..082c31be285 100644
--- a/packages/grafana-flamegraph/src/FlameGraphHeader.tsx
+++ b/packages/grafana-flamegraph/src/FlameGraphHeader.tsx
@@ -130,7 +130,6 @@ const FlameGraphHeader = ({
             aria-label={'Reset focus and sandwich state'}
           />
         )}
-        {extraHeaderElements && <div className={styles.extraElements}>{extraHeaderElements}</div>}
         {selectedView === SelectedView.Multi ? (
           <>
             {viewMode === ViewMode.Single && (
@@ -147,6 +146,7 @@ const FlameGraphHeader = ({
               options={viewModeOptions}
               value={viewMode}
               onChange={setViewMode}
+              className={styles.buttonSpacing}
             />
           </>
         ) : (
@@ -155,8 +155,10 @@ const FlameGraphHeader = ({
             options={getViewOptions(containerWidth, vertical)}
             value={selectedView}
             onChange={setSelectedView}
+            className={styles.buttonSpacing}
           />
         )}
+        {extraHeaderElements && <div className={styles.extraElements}>{extraHeaderElements}</div>}
       </div>
     </div>
   );