From 0844b87b2fe1917be14ed1c93f8407aa56e54467 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Thu, 4 Jan 2024 15:42:28 +0200
Subject: [PATCH] PluginDetails: Fix usage list height (#79695)

---
 .betterer.results                             |  4 +-
 .../admin/components/PluginDetailsBody.tsx    | 91 ++++++++-----------
 2 files changed, 41 insertions(+), 54 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index bb566f91425..0d83455565f 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -4040,9 +4040,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
     "public/app/features/plugins/admin/components/PluginDetailsBody.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
+      [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
diff --git a/public/app/features/plugins/admin/components/PluginDetailsBody.tsx b/public/app/features/plugins/admin/components/PluginDetailsBody.tsx
index 27dd07748c0..54420db174e 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsBody.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsBody.tsx
@@ -131,55 +131,44 @@ export function PluginDetailsBody({ plugin, queryParams, pageId }: Props): JSX.E
 }
 
 export const getStyles = (theme: GrafanaTheme2) => ({
-  container: css``,
-  readme: css`
-    & img {
-      max-width: 100%;
-    }
-
-    h1,
-    h2,
-    h3 {
-      margin-top: ${theme.spacing(3)};
-      margin-bottom: ${theme.spacing(2)};
-    }
-
-    *:first-child {
-      margin-top: 0;
-    }
-
-    li {
-      margin-left: ${theme.spacing(2)};
-      & > p {
-        margin: ${theme.spacing()} 0;
-      }
-    }
-
-    a {
-      color: ${theme.colors.text.link};
-
-      &:hover {
-        color: ${theme.colors.text.link};
-        text-decoration: underline;
-      }
-    }
-
-    table {
-      table-layout: fixed;
-      width: 100%;
-
-      td,
-      th {
-        overflow-x: auto;
-        padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
-      }
-
-      table,
-      th,
-      td {
-        border: 1px solid ${theme.colors.border.medium};
-        border-collapse: collapse;
-      }
-    }
-  `,
+  container: css({
+    height: '100%',
+  }),
+  readme: css({
+    '& img': {
+      maxWidth: '100%',
+    },
+    'h1, h2, h3': {
+      marginTop: theme.spacing(3),
+      marginBottom: theme.spacing(2),
+    },
+    '*:first-child': {
+      marginTop: 0,
+    },
+    li: {
+      marginLeft: theme.spacing(2),
+      '& > p': {
+        margin: theme.spacing(1, 0),
+      },
+    },
+    a: {
+      color: theme.colors.text.link,
+      '&:hover': {
+        color: theme.colors.text.link,
+        textDecoration: 'underline',
+      },
+    },
+    table: {
+      tableLayout: 'fixed',
+      width: '100%',
+      'td, th': {
+        overflowX: 'auto',
+        padding: theme.spacing(0.5, 1),
+      },
+      'table, th, td': {
+        border: `1px solid ${theme.colors.border.medium}`,
+        borderCollapse: 'collapse',
+      },
+    },
+  }),
 });