From 7dd89a468963726f45545bbd35651154e949ea36 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 3 Jun 2022 05:15:39 -0400
Subject: [PATCH] Plugins Catalog: Make tabs position consistent with other
 Grafana pages (#49997) (#50141)

(cherry picked from commit 691a597f438117a74bd525210cee189a750d1061)

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
---
 .../plugins/admin/pages/PluginDetails.tsx     | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/public/app/features/plugins/admin/pages/PluginDetails.tsx b/public/app/features/plugins/admin/pages/PluginDetails.tsx
index 0369046067c..246ff2677d5 100644
--- a/public/app/features/plugins/admin/pages/PluginDetails.tsx
+++ b/public/app/features/plugins/admin/pages/PluginDetails.tsx
@@ -75,22 +75,25 @@ export default function PluginDetails({ match, queryParams }: Props): JSX.Elemen
   return (
     <Page>
       <PluginDetailsHeader currentUrl={`${url}?page=${pageId}`} parentUrl={parentUrl} plugin={plugin} />
+      {/* Tab navigation */}
+      <div>
+        <div className="page-container">
+          <TabsBar hideBorder>
+            {tabs.map((tab: PluginDetailsTab) => {
+              return (
+                <Tab
+                  key={tab.label}
+                  label={tab.label}
+                  href={tab.href}
+                  icon={tab.icon as IconName}
+                  active={tab.id === pageId}
+                />
+              );
+            })}
+          </TabsBar>
+        </div>
+      </div>
       <Page.Contents>
-        {/* Tab navigation */}
-        <TabsBar>
-          {tabs.map((tab: PluginDetailsTab) => {
-            return (
-              <Tab
-                key={tab.label}
-                label={tab.label}
-                href={tab.href}
-                icon={tab.icon as IconName}
-                active={tab.id === pageId}
-              />
-            );
-          })}
-        </TabsBar>
-
         {/* Active tab */}
         <TabContent className={styles.tabContent}>
           <PluginDetailsSignature plugin={plugin} className={styles.alert} />