diff --git a/public/app/features/logs/components/LogRowMessage.tsx b/public/app/features/logs/components/LogRowMessage.tsx index a29c2f9c850..046b5116898 100644 --- a/public/app/features/logs/components/LogRowMessage.tsx +++ b/public/app/features/logs/components/LogRowMessage.tsx @@ -61,7 +61,6 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa justify-content: space-evenly; align-items: center; position: absolute; - right: ${isInDashboard ? '0px' : '-8px'}; top: 0; bottom: auto; height: 36px; @@ -72,6 +71,11 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa visibility: hidden; width: ${showContextButton ? '80px' : '40px'}; `, + logRowMenuCell: css` + position: absolute; + right: ${isInDashboard ? '40px' : `calc(75px + ${theme.spacing()} + ${showContextButton ? '80px' : '40px'})`}; + margin-top: -1px; + `, }; }; @@ -156,36 +160,45 @@ class UnThemedLogRowMessage extends PureComponent { const styles = getStyles(theme, shouldShowContextToggle, app === CoreApp.Dashboard); return ( - // When context is open, the position has to be NOT relative. - // Setting the postion as inline-style to overwrite the more sepecific style definition from `style.logsRowMessage`. - -
+ { + // When context is open, the position has to be NOT relative. // Setting the postion as inline-style to + // overwrite the more sepecific style definition from `style.logsRowMessage`. + } + - {contextIsOpen && context && ( - { - if (updateLimit) { - updateLimit(); - } - }} - /> - )} - - {renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, style.logsRowMatchHighLight)} - - {showRowMenu && ( +
+ {contextIsOpen && context && ( + { + if (updateLimit) { + updateLimit(); + } + }} + /> + )} + + {renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, style.logsRowMatchHighLight)} + +
+ + {showRowMenu && ( + e.stopPropagation()}> {shouldShowContextToggle && ( @@ -200,9 +213,9 @@ class UnThemedLogRowMessage extends PureComponent { /> - )} -
- + + )} + ); } } diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts index b6a2b734bd0..a1c2bbda54a 100644 --- a/public/app/features/logs/components/getLogRowStyles.ts +++ b/public/app/features/logs/components/getLogRowStyles.ts @@ -58,11 +58,11 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => { } } - td:last-child { + td:not(.log-row-menu-cell):last-child { width: 100%; } - > td { + > td:not(.log-row-menu-cell) { position: relative; padding-right: ${theme.spacing(1)}; border-top: 1px solid transparent; @@ -122,6 +122,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => { label: logs-row__message; white-space: pre-wrap; word-break: break-all; + width: 100%; `, //Log details specific CSS logDetailsContainer: css`