Fix log row when query is short (#21126)

f8fa140a · Ivana Huckova · GitHub · 13073fa6 · f8fa140a
Commit f8fa140a authored Dec 17, 2019 by Ivana Huckova Committed by GitHub Dec 17, 2019
Hide whitespace changes
Inline Side-by-side

Showing with 9 additions and 3 deletions

packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
+9 -3

No files found.
--- a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
+++ b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
@@ -80,6 +80,9 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
          }
        }
      }
+      td:last-child {
+        width: 100%;
+      }
      > td {
        padding-right: ${theme.spacing.sm};
@@ -101,6 +104,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
    logsRowLevel: css`
      label: logs-row__level;
      position: relative;
+      max-width: 10px;
      cursor: default;
      &::after {
        content: '';
@@ -117,10 +121,12 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
      position: relative;
      font-size: 9px;
      padding-top: 5px;
+      max-width: 15px;
    `,
    logsRowLocalTime: css`
      label: logs-row__localtime;
      white-space: nowrap;
+      max-width: 12.5em;
    `,
    logsRowLabels: css`
      label: logs-row__labels;
@@ -156,10 +162,10 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
    `,
    logDetailsLabel: css`
      label: logs-row-details__label;
-      max-width: 25em;
+      max-width: 30em;
-      min-width: 15em;
+      min-width: 20em;
      padding: 0 ${theme.spacing.sm};
-      word-break: break-all;
+      overflow-wrap: break-word;
    `,
    logDetailsHeading: css`
      label: logs-row-details__heading;