Search (Playground) - Fix minor css paddings inside table (#49263)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

public/app/features/search/page/components/SearchResultsTable.tsx

@@ -159,13 +159,17 @@ const getStyles = (theme: GrafanaTheme2) => {
     `,
     cellWrapper: css`
       border-right: none;
+      padding: ${theme.spacing(1)};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      user-select: text;
+      white-space: nowrap;
       &:hover {
         box-shadow: none;
       }
     `,
     headerCell: css`
-      padding-top: 2px;
-      padding-left: 10px;
+      padding: ${theme.spacing(1)};
     `,
     headerRow: css`
       background-color: ${theme.colors.background.secondary};
@@ -199,20 +203,28 @@ const getStyles = (theme: GrafanaTheme2) => {
         }
       }
     `,
+    missingTitleText: css`
+      color: ${theme.colors.text.disabled};
+      font-style: italic;
+    `,
     invalidDatasourceItem: css`
       color: ${theme.colors.error.main};
       text-decoration: line-through;
     `,
     typeText: css`
       color: ${theme.colors.text.secondary};
+      padding-top: ${theme.spacing(1)};
     `,
     locationItem: css`
       color: ${theme.colors.text.secondary};
       margin-right: 12px;
     `,
+    locationCellStyle: css`
+      padding-top: ${theme.spacing(1)};
+      padding-right: ${theme.spacing(1)};
+    `,
     checkboxHeader: css`
-      // display: flex;
-      // justify-content: flex-start;
+      margin-left: 2px;
     `,
     checkbox: css`
       margin-left: 10px;
@@ -226,6 +238,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       }
     `,
     tagList: css`
+      padding-top: ${theme.spacing(0.5)};
       justify-content: flex-start;
       flex-wrap: nowrap;
     `,

public/app/features/search/page/components/columns.tsx

@@ -1,4 +1,4 @@
-import { css, cx } from '@emotion/css';
+import { cx } from '@emotion/css';
 import React from 'react';
 import SVG from 'react-inlinesvg';
 
@@ -13,8 +13,6 @@ import { TableColumn } from './SearchResultsTable';
 
 const TYPE_COLUMN_WIDTH = 250;
 const DATASOURCE_COLUMN_WIDTH = 200;
-const LOCATION_COLUMN_WIDTH = 200;
-const TAGS_COLUMN_WIDTH = 300;
 
 export const generateColumns = (
   response: QueryResponse,
@@ -76,9 +74,14 @@ export const generateColumns = (
   width = Math.max(availableWidth * 0.2, 300);
   columns.push({
     Cell: (p) => {
-      const name = access.name.values.get(p.row.index);
+      let classNames = cx(p.cellStyle, styles.cellWrapper);
+      let name = access.name.values.get(p.row.index);
+      if (!name?.length) {
+        name = 'Missing title'; // normal for panels
+        classNames += ' ' + styles.missingTitleText;
+      }
       return (
-        <a {...p.cellProps} href={p.userProps.href} className={cx(p.cellStyle, styles.cellWrapper)}>
+        <a {...p.cellProps} href={p.userProps.href} className={classNames} title={name}>
           {name}
         </a>
       );
@@ -110,22 +113,17 @@ export const generateColumns = (
     availableWidth -= width;
   }
 
-  width = Math.max(availableWidth - TAGS_COLUMN_WIDTH, LOCATION_COLUMN_WIDTH);
+  width = Math.max(availableWidth / 2.5, 200);
+  columns.push(makeTagsColumn(access.tags, width, styles.tagList, onTagSelected));
+  availableWidth -= width;
+
   const meta = response.view.dataFrame.meta?.custom as SearchResultMeta;
-  if (meta?.locationInfo) {
+  if (meta?.locationInfo && availableWidth > 0) {
     columns.push({
       Cell: (p) => {
         const parts = (access.location?.values.get(p.row.index) ?? '').split('/');
         return (
-          <div
-            {...p.cellProps}
-            className={cx(
-              p.cellStyle,
-              css`
-                padding-right: 10px;
-              `
-            )}
-          >
+          <div {...p.cellProps} className={cx(p.cellStyle, styles.locationCellStyle)}>
             {parts.map((p) => {
               const info = meta.locationInfo[p];
               return info ? (
@@ -142,13 +140,10 @@ export const generateColumns = (
       id: `column-location`,
       field: access.location ?? access.url,
       Header: 'Location',
-      width,
+      width: availableWidth,
     });
-    availableWidth -= width;
   }
 
-  columns.push(makeTagsColumn(access.tags, availableWidth, styles.tagList, onTagSelected));
-
   return columns;
 };