diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx index cd9388e84f4..39aa6a88f96 100644 --- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx +++ b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx @@ -1,7 +1,8 @@ +import { css } from '@emotion/css'; import React, { useState } from 'react'; import { arrayUtils } from '@grafana/data'; -import { DeleteButton, HorizontalGroup, Icon, IconButton, TagList } from '@grafana/ui'; +import { DeleteButton, HorizontalGroup, Icon, IconButton, TagList, useStyles2 } from '@grafana/ui'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; import { DashboardModel, DashboardLink } from '../../state/DashboardModel'; @@ -14,6 +15,8 @@ type LinkSettingsListProps = { }; export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListProps) => { + const styles = useStyles2(getStyles); + const [links, setLinks] = useState(dashboard.links); const moveLink = (idx: number, direction: number) => { @@ -69,8 +72,8 @@ export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListP - {link.title && {link.title}} - {link.type === 'link' && {link.url}} + {link.title && {link.title}} + {link.type === 'link' && {link.url}} {link.type === 'dashboards' && } @@ -100,3 +103,16 @@ export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListP ); }; + +const getStyles = () => ({ + titleWrapper: css` + width: 20vw; + text-overflow: ellipsis; + overflow: hidden; + `, + urlWrapper: css` + width: 40vw; + text-overflow: ellipsis; + overflow: hidden; + `, +});