From 8329cd59f65d2fbb943ac9b4ac031e701999496e Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 24 Mar 2022 12:14:56 +0000
Subject: [PATCH] LibraryPanels: Increase max description length to 2048 chars
 (#46601)

---
 pkg/services/sqlstore/migrations/libraryelements.go       | 4 ++++
 .../panel/components/VizTypePicker/PanelTypeCard.tsx      | 8 +++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/pkg/services/sqlstore/migrations/libraryelements.go b/pkg/services/sqlstore/migrations/libraryelements.go
index a60d6a72403..0a2e9daa64d 100644
--- a/pkg/services/sqlstore/migrations/libraryelements.go
+++ b/pkg/services/sqlstore/migrations/libraryelements.go
@@ -54,4 +54,8 @@ func addLibraryElementsMigrations(mg *migrator.Migrator) {
 	mg.AddMigration("add unique index library_element org_id_uid", migrator.NewAddIndexMigration(libraryElementsV1, &migrator.Index{
 		Cols: []string{"org_id", "uid"}, Type: migrator.UniqueIndex,
 	}))
+
+	mg.AddMigration("increase max description length to 2048", migrator.NewTableCharsetMigration("library_element", []*migrator.Column{
+		{Name: "description", Type: migrator.DB_NVarchar, Length: 2048, Nullable: false},
+	}))
 }
diff --git a/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx b/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
index c357de03032..9c2c93f6f9a 100644
--- a/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
+++ b/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
@@ -60,6 +60,7 @@ export const PanelTypeCard: React.FC<Props> = ({
             e.stopPropagation();
             onDelete();
           }}
+          className={styles.deleteButton}
           aria-label="Delete button on panel type card"
         />
       )}
@@ -94,8 +95,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       }
     `,
     itemContent: css`
+      overflow: hidden;
       position: relative;
-      width: 100%;
       padding: ${theme.spacing(0, 1)};
     `,
     current: css`
@@ -117,12 +118,14 @@ const getStyles = (theme: GrafanaTheme2) => {
       width: 100%;
     `,
     description: css`
+      display: block;
       text-overflow: ellipsis;
       overflow: hidden;
       color: ${theme.colors.text.secondary};
       font-size: ${theme.typography.bodySmall.fontSize};
       font-weight: ${theme.typography.fontWeightLight};
       width: 100%;
+      max-height: 4.5em;
     `,
     img: css`
       max-height: 38px;
@@ -133,6 +136,9 @@ const getStyles = (theme: GrafanaTheme2) => {
     badge: css`
       background: ${theme.colors.background.primary};
     `,
+    deleteButton: css`
+      margin-left: auto;
+    `,
   };
 };