From 700f59a0eadc5a1690d976773f2f8fa38bb469f5 Mon Sep 17 00:00:00 2001
From: Victor Marin <36818606+mdvictor@users.noreply.github.com>
Date: Thu, 14 Nov 2024 09:37:27 +0200
Subject: [PATCH] [v11.3.x] Fix dashboards listing table appearing distorted
 (#96390)

Fix dashboards listing table appearing distorted (#96371)

* fix CSS

* approx height calc to account for header div

(cherry picked from commit 19c04168c34d9ace5fcba9a1ea43cac6de13c173)
---
 .../features/plugins/admin/components/PluginDetailsBody.tsx | 6 +++++-
 .../features/plugins/admin/components/PluginDetailsPage.tsx | 1 +
 .../app/features/plugins/admin/components/PluginUsage.tsx   | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/public/app/features/plugins/admin/components/PluginDetailsBody.tsx b/public/app/features/plugins/admin/components/PluginDetailsBody.tsx
index 1a76902203c..4be6e4d0fd0 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsBody.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsBody.tsx
@@ -114,7 +114,7 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E
 
   if (pageId === PluginTabIds.USAGE && pluginConfig) {
     return (
-      <div>
+      <div className={styles.wrap}>
         <PluginUsage plugin={pluginConfig?.meta} />
       </div>
     );
@@ -136,6 +136,10 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E
 }
 
 export const getStyles = (theme: GrafanaTheme2) => ({
+  wrap: css({
+    width: '100%',
+    height: '50vh',
+  }),
   readme: css({
     '& img': {
       maxWidth: '100%',
diff --git a/public/app/features/plugins/admin/components/PluginDetailsPage.tsx b/public/app/features/plugins/admin/components/PluginDetailsPage.tsx
index 8aca36f54fa..e11f83c2c89 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsPage.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsPage.tsx
@@ -115,6 +115,7 @@ export const getStyles = (theme: GrafanaTheme2) => {
     // Needed due to block formatting context
     tabContent: css({
       paddingLeft: '5px',
+      width: '100%',
     }),
   };
 };
diff --git a/public/app/features/plugins/admin/components/PluginUsage.tsx b/public/app/features/plugins/admin/components/PluginUsage.tsx
index 734f35d14d7..920b059982b 100644
--- a/public/app/features/plugins/admin/components/PluginUsage.tsx
+++ b/public/app/features/plugins/admin/components/PluginUsage.tsx
@@ -88,7 +88,7 @@ export const getStyles = (theme: GrafanaTheme2) => {
   return {
     wrap: css`
       width: 100%;
-      height: 100%;
+      height: 90%;
     `,
     info: css`
       padding-bottom: 30px;