From 12a87c089910011605c96a75eeac94a584d05507 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Tue, 7 May 2024 14:27:44 +0200
Subject: [PATCH] Logs panel: Fix spacing when log details disabled (#87431)

* Logs panel: Fix spacing when log details disabled

* Fix error spacing
---
 public/app/features/logs/components/LogRow.tsx    | 15 ++++++++++-----
 .../features/logs/components/getLogRowStyles.ts   |  4 ++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/public/app/features/logs/components/LogRow.tsx b/public/app/features/logs/components/LogRow.tsx
index ecc44185d2f..91ec154e005 100644
--- a/public/app/features/logs/components/LogRow.tsx
+++ b/public/app/features/logs/components/LogRow.tsx
@@ -253,18 +253,23 @@ class UnThemedLogRow extends PureComponent<Props, State> {
               {processedRow.duplicates && processedRow.duplicates > 0 ? `${processedRow.duplicates + 1}x` : null}
             </td>
           )}
-          <td className={hasError ? '' : `${levelStyles.logsRowLevelColor} ${styles.logsRowLevel}`}>
+          <td
+            className={hasError ? styles.logsRowWithError : `${levelStyles.logsRowLevelColor} ${styles.logsRowLevel}`}
+          >
             {hasError && (
               <Tooltip content={`Error: ${errorMessage}`} placement="right" theme="error">
                 <Icon className={styles.logIconError} name="exclamation-triangle" size="xs" />
               </Tooltip>
             )}
           </td>
-          {enableLogDetails && (
-            <td title={showDetails ? 'Hide log details' : 'See log details'} className={styles.logsRowToggleDetails}>
+          <td
+            title={enableLogDetails ? (showDetails ? 'Hide log details' : 'See log details') : ''}
+            className={enableLogDetails ? styles.logsRowToggleDetails : ''}
+          >
+            {enableLogDetails && (
               <Icon className={styles.topVerticalAlign} name={showDetails ? 'angle-down' : 'angle-right'} />
-            </td>
-          )}
+            )}
+          </td>
           {showTime && <td className={styles.logsRowLocalTime}>{this.renderTimeStamp(row.timeEpochMs)}</td>}
           {showLabels && processedRow.uniqueLabels && (
             <td className={styles.logsRowLabels}>
diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts
index 447c9b98b37..e2142cdf592 100644
--- a/public/app/features/logs/components/getLogRowStyles.ts
+++ b/public/app/features/logs/components/getLogRowStyles.ts
@@ -58,6 +58,10 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
         left: ${theme.spacing(0.5)};
       }
     `,
+    // Compared to logsRowLevel we need to make error logs wider to accommodate the icon
+    logsRowWithError: css({
+      maxWidth: `${theme.spacing(1.5)}`,
+    }),
     logsRowMatchHighLight: css`
       label: logs-row__match-highlight;
       background: inherit;