Fix log row when query is short (#21126)

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;
-      min-width: 15em;
+      max-width: 30em;
+      min-width: 20em;
       padding: 0 ${theme.spacing.sm};
-      word-break: break-all;
+      overflow-wrap: break-word;
     `,
     logDetailsHeading: css`
       label: logs-row-details__heading;