IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Table Panel: Text wrapping fix inspect viewing issues (#83867)

Browse Source 
* Fix inspect viewing issues

* Fix long line wrapping

* Prettier

* Fix text wrapping

* Fix overflowing text
This commit is contained in:
Kyle Cunningham 2024-03-05 13:00:41 -06:00 committed by GitHub
parent e916372249
commit f4da9bd09e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/grafana-ui/src/components/Table/DefaultCell.tsx
View File

@ -132,25 +132,13 @@ function getCellStyle(
// If we have definied colors return those styles
// Otherwise we return default styles
if (textColor !== undefined || bgColor !== undefined) {
return tableStyles.buildCellContainerStyle(
textColor,
bgColor,
!disableOverflowOnHover,
isStringValue,
shouldWrapText
);
}
if (isStringValue) {
return disableOverflowOnHover
? tableStyles.buildCellContainerStyle(undefined, undefined, false, true, shouldWrapText)
: tableStyles.buildCellContainerStyle(undefined, undefined, true, true, shouldWrapText);
} else {
return disableOverflowOnHover
? tableStyles.buildCellContainerStyle(undefined, undefined, false, shouldWrapText)
: tableStyles.buildCellContainerStyle(undefined, undefined, true, false, shouldWrapText);
}
return tableStyles.buildCellContainerStyle(
textColor,
bgColor,
!disableOverflowOnHover,
isStringValue,
shouldWrapText
);
}
function getLinkStyle(tableStyles: TableStyles, cellOptions: TableCellOptions, targetClassName: string | undefined) {

8
packages/grafana-ui/src/components/Table/styles.ts
View File

@ -49,14 +49,14 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
'&:hover': {
overflow: overflowOnHover ? 'visible' : undefined,
width: textShouldWrap ? 'auto' : 'auto !important',
height: textShouldWrap ? 'auto !important' : `${rowHeight - 1}px`,
width: textShouldWrap || !overflowOnHover ? 'auto' : 'auto !important',
height: textShouldWrap || overflowOnHover ? 'auto !important' : `${rowHeight - 1}px`,
minHeight: `${rowHeight - 1}px`,
wordBreak: textShouldWrap ? 'break-word' : undefined,
whiteSpace: overflowOnHover ? 'normal' : 'nowrap',
whiteSpace: textShouldWrap && 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,
zIndex: 1,
'.cellActions': {
visibility: 'visible',
opacity: 1,