From e8cf80e7f54df1d42144f2f640ec25575fe40e73 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 3 Jan 2023 18:23:08 +0100
Subject: [PATCH] feat(ui) - cards - widget name ellipsis

---
 .../components/Dashboard/components/MetricsList/GridView.tsx  | 2 +-
 .../Dashboard/components/WidgetWrapper/WidgetWrapper.tsx      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx b/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx
index 0151e4660..9b131bb2a 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx
@@ -11,7 +11,7 @@ interface Props {
 function GridView(props: Props) {
   const { siteId, list, selectedList, toggleSelection } = props;
   return (
-    <div className="grid grid-cols-4 gap-4 m-4">
+    <div className="grid grid-cols-4 gap-4 m-4 items-start">
       {list.map((metric: any) => (
         <React.Fragment key={metric.metricId}>
           <WidgetWrapper
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index 5e81386c6..74786d14c 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import cn from 'classnames';
-import { ItemMenu, Tooltip } from 'UI';
+import { ItemMenu, Tooltip, TextEllipsis } from 'UI';
 import { useDrag, useDrop } from 'react-dnd';
 import WidgetChart from '../WidgetChart';
 import { observer } from 'mobx-react-lite';
@@ -127,7 +127,7 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
           })}
         >
           {!props.hideName ? (
-            <div className="capitalize-first w-full font-medium">{widget.name}</div>
+            <div className="capitalize-first w-full font-medium"><TextEllipsis text={widget.name} /></div>
           ) : null}
           {isWidget && (
             <div className="flex items-center" id="no-print">