diff --git a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
index 221d59dcf4..7fff109d2a 100644
--- a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
+++ b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
@@ -51,6 +51,7 @@
display: flex;
justify-content: space-between;
align-items: center;
+ gap: 8px;
min-height: 24px;
@@ -59,6 +60,14 @@
align-items: center;
gap: 6px;
line-height: 20px;
+ width: 60%;
+
+ .dashboard-icon {
+ display: inline-block;
+ margin-top: 4px;
+ margin-right: 4px;
+ line-height: 20px;
+ }
.dot {
min-height: 6px;
@@ -66,6 +75,20 @@
border-radius: 50%;
}
+ .title {
+ color: var(--bg-vanilla-100);
+ font-size: var(--font-size-sm);
+ font-style: normal;
+ font-weight: var(--font-weight-medium);
+ line-height: 20px;
+ letter-spacing: -0.07px;
+
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+
.ant-typography {
color: var(--bg-vanilla-100);
font-size: var(--font-size-sm);
@@ -86,6 +109,45 @@
display: none;
}
}
+
+ .tags-with-actions {
+ display: flex;
+ align-items: center;
+ width: 40%;
+ justify-content: flex-end;
+
+ .dashboard-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ justify-content: flex-end;
+
+ .tag {
+ display: flex;
+ padding: 4px 8px;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ height: 28px;
+ border-radius: 20px;
+ border: 1px solid rgba(173, 127, 88, 0.2);
+ background: rgba(173, 127, 88, 0.1);
+ color: var(--bg-sienna-400);
+ text-align: center;
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ margin-inline-end: 0px !important;
+ }
+ }
+ }
+ }
+
+ .dashboard-action-icon {
+ margin-left: 16px;
}
.dashboard-details {
@@ -525,35 +587,6 @@
cursor: pointer;
}
}
-
- .tags-with-actions {
- display: flex;
- align-items: center;
-
- .dashboard-tags {
- display: flex;
-
- .tag {
- display: flex;
- padding: 4px 8px;
- justify-content: center;
- align-items: center;
- gap: 4px;
- height: 28px;
- border-radius: 20px;
- border: 1px solid rgba(173, 127, 88, 0.2);
- background: rgba(173, 127, 88, 0.1);
- color: var(--bg-sienna-400);
- text-align: center;
- font-family: Inter;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 20px; /* 142.857% */
- letter-spacing: -0.07px;
- }
- }
- }
}
.new-dashboard-menu {
@@ -681,13 +714,13 @@
.action-btn {
display: flex;
- padding: 14px;
+ padding: 8px;
height: unset;
align-items: center;
gap: 6px;
color: var(--bg-vanilla-400);
font-family: Inter;
- font-size: 14px;
+ font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -706,12 +739,12 @@
.ant-typography {
display: flex;
- padding: 14px;
+ padding: 12px 8px;
align-items: center;
gap: 6px;
color: var(--bg-cherry-400) !important;
font-family: Inter;
- font-size: 14px;
+ font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -1321,3 +1354,12 @@
}
}
}
+
+.title-toolip {
+ .ant-tooltip-content {
+ .ant-tooltip-inner {
+ height: 400px;
+ overflow: auto;
+ }
+ }
+}
diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index d9994b3776..32af97aac2 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -449,79 +449,94 @@ function DashboardsList(): JSX.Element {
-
-
-
- {dashboard.name}
-
-
+
50 ? dashboard?.name : ''}
+ placement="left"
+ overlayClassName="title-toolip"
+ >
+
+
+
+ {dashboard.name}
+
+
+
{dashboard?.tags && dashboard.tags.length > 0 && (
- {dashboard.tags.map((tag) => (
+ {dashboard.tags.slice(0, 3).map((tag) => (
{tag}
))}
+
+ {dashboard.tags.length > 3 && (
+
+ + {dashboard.tags.length - 3}
+
+ )}
)}
- {action && (
-
-
- }
- onClick={onClickHandler}
- >
- View
-
- }
- onClick={(e): void => {
- e.stopPropagation();
- e.preventDefault();
- setCopy(`${window.location.origin}${getLink()}`);
- }}
- >
- Copy Link
-
-
-
-
- }
- placement="bottomRight"
- arrow={false}
- rootClassName="dashboard-actions"
- >
-
{
- e.stopPropagation();
- e.preventDefault();
- }}
- />
-
- )}
+
+ {action && (
+
+
+ }
+ onClick={onClickHandler}
+ >
+ View
+
+ }
+ onClick={(e): void => {
+ e.stopPropagation();
+ e.preventDefault();
+ setCopy(`${window.location.origin}${getLink()}`);
+ }}
+ >
+ Copy Link
+
+
+
+
+ }
+ placement="bottomRight"
+ arrow={false}
+ rootClassName="dashboard-actions"
+ >
+ {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ />
+
+ )}
diff --git a/frontend/src/container/NewDashboard/DashboardDescription/Description.styles.scss b/frontend/src/container/NewDashboard/DashboardDescription/Description.styles.scss
index 48023ecda5..d82c2da7b6 100644
--- a/frontend/src/container/NewDashboard/DashboardDescription/Description.styles.scss
+++ b/frontend/src/container/NewDashboard/DashboardDescription/Description.styles.scss
@@ -59,13 +59,16 @@
justify-content: space-between;
align-items: center;
margin-right: 16px;
+ box-sizing: border-box;
.dashboard-breadcrumbs {
+ width: 100%;
height: 48px;
padding: 16px;
display: flex;
gap: 6px;
align-items: center;
+ max-width: 100%;
.dashboard-btn {
display: flex;
@@ -99,6 +102,14 @@
line-height: 20px; /* 142.857% */
height: 20px;
+ max-width: calc(100% - 120px);
+
+ span {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
.ant-btn-icon {
margin-inline-end: 4px;
}
@@ -110,14 +121,20 @@
}
}
- .dashbord-details {
+ .dashboard-details {
display: flex;
justify-content: space-between;
+ gap: 8px;
+ padding: 16px 16px 0px 16px;
+ align-items: flex-start;
+
.left-section {
display: flex;
- padding: 10px 0px 0px 16px;
+ flex-wrap: wrap;
+
align-items: center;
gap: 8px;
+ width: 45%;
.dashboard-title {
color: #fff;
@@ -128,13 +145,23 @@
line-height: 24px; /* 150% */
letter-spacing: -0.08px;
flex-shrink: 0;
+
+ flex: 1;
+ min-width: fit-content;
+
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
}
.right-section {
display: flex;
+ width: 55%;
+ justify-content: flex-end;
+ flex-wrap: wrap;
align-items: center;
- padding: 10px 16px 0px 0px;
gap: 14px;
.icons {
@@ -199,6 +226,8 @@
display: flex;
gap: 6px;
padding: 16px 16px 0px 16px;
+ flex-wrap: wrap;
+
.tag {
display: flex;
padding: 4px 8px;
@@ -219,7 +248,6 @@
}
}
.dashboard-description-section {
- max-width: 957px;
color: var(--bg-vanilla-400);
font-family: Inter;
font-size: 14px;
@@ -578,7 +606,7 @@
}
}
- .dashbord-details {
+ .dashboard-details {
.left-section {
.dashboard-title {
color: var(--bg-ink-300);
diff --git a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx b/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
index 1a60e74de9..972f8ca81a 100644
--- a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
+++ b/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
@@ -294,32 +294,31 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
>
Dashboard /
-
- }
- >
+
-
+
-
-
- {title}
-
+
30 ? title : ''}>
+
+ {' '}
+ {title}
+
+
{isDashboardLocked &&
}