From 49299ebd9cf8e37556f32043b7b91ca3b0e68868 Mon Sep 17 00:00:00 2001 From: Alvaro Huarte Date: Fri, 23 Feb 2024 05:20:56 +0100 Subject: [PATCH] Table Component: Improve text-wrapping behavior of cells (#82872) * Fix text-wrapping of cells in Tables * Set wordbreak on hover for long texts without spaces --- packages/grafana-ui/src/components/Table/styles.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts index e37e697b28c..ebd7d0e1780 100644 --- a/packages/grafana-ui/src/components/Table/styles.ts +++ b/packages/grafana-ui/src/components/Table/styles.ts @@ -48,7 +48,11 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell '&:hover': { overflow: overflowOnHover ? 'visible' : undefined, - width: overflowOnHover ? 'auto !important' : undefined, + width: overflowOnHover ? 'auto' : undefined, + height: overflowOnHover ? 'auto' : `${rowHeight - 1}px`, + minHeight: `${rowHeight - 1}px`, + wordBreak: overflowOnHover ? 'break-word' : undefined, + whiteSpace: overflowOnHover ? 'normal' : 'nowrap', boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined, background: overflowOnHover ? background ?? theme.components.table.rowHoverBackground : undefined, zIndex: overflowOnHover ? 1 : undefined,