diff --git a/public/app/features/search/components/SearchCheckbox.tsx b/public/app/features/search/components/SearchCheckbox.tsx index 9261556b7ef..c80ea84db75 100644 --- a/public/app/features/search/components/SearchCheckbox.tsx +++ b/public/app/features/search/components/SearchCheckbox.tsx @@ -13,9 +13,7 @@ interface Props { export const SearchCheckbox = memo( ({ onClick, className, checked = false, editable = false, 'aria-label': ariaLabel }: Props) => { return editable ? ( -
- -
+ ) : null; } ); diff --git a/public/app/features/search/components/SearchItem.tsx b/public/app/features/search/components/SearchItem.tsx index ef106860a28..c904f403469 100644 --- a/public/app/features/search/components/SearchItem.tsx +++ b/public/app/features/search/components/SearchItem.tsx @@ -48,7 +48,6 @@ export const SearchItem = ({ item, isSelected, editable, onToggleChecked, onTagS const handleCheckboxClick = useCallback( (ev: React.MouseEvent) => { ev.stopPropagation(); - ev.preventDefault(); if (onToggleChecked) { onToggleChecked(item); @@ -68,38 +67,38 @@ export const SearchItem = ({ item, isSelected, editable, onToggleChecked, onTagS ); return ( - - {item.title} +
  • + - - - + + {item.title} - - {description} + + {description} - {item.sortMetaName && ( - - - {item.sortMeta} {item.sortMetaName} - - )} - - - `Filter by tag "${tag}"`} /> - - + {item.sortMetaName && ( + + + {item.sortMeta} {item.sortMetaName} + + )} + + + `Filter by tag "${tag}"`} /> + + +
  • ); }; @@ -116,9 +115,15 @@ function kindName(kind: DashboardViewItem['kind']) { const getStyles = (theme: GrafanaTheme2) => { return { - container: css` + cardContainer: css` + display: flex; + list-style: none; + align-items: center; margin-bottom: ${theme.spacing(0.75)}; + `, + card: css` padding: ${theme.spacing(1)} ${theme.spacing(2)}; + margin-bottom: 0; `, metaContainer: css` display: flex; @@ -129,8 +134,5 @@ const getStyles = (theme: GrafanaTheme2) => { margin-right: ${theme.spacing(0.5)}; } `, - checkbox: css` - margin-right: 0; - `, }; };