From bbc401a6be11c73d85e0854fac4444b8dd32d81c Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matias.chomicki@grafana.com>
Date: Wed, 3 Sep 2025 18:53:38 +0200
Subject: [PATCH] New Log Details: Inline improvements (#110276)

* LogLineDetails: make inline details taller

* Translations: add missing plurals

* Update sidebar icon

* LogList: default to inline details

* LogLineDetails: details by screen width

* Inline details: slightly smaller

* LogLineDetails: use container size for default mode
---
 .../logs/components/panel/LogLineDetails.tsx      |  2 +-
 .../components/panel/LogLineDetailsHeader.tsx     |  2 +-
 .../features/logs/components/panel/LogList.tsx    |  2 +-
 .../logs/components/panel/LogListContext.tsx      | 15 ++++++++++++---
 public/locales/en-US/grafana.json                 |  4 ++--
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/public/app/features/logs/components/panel/LogLineDetails.tsx b/public/app/features/logs/components/panel/LogLineDetails.tsx
index 83de6d37c39..31251be7b46 100644
--- a/public/app/features/logs/components/panel/LogLineDetails.tsx
+++ b/public/app/features/logs/components/panel/LogLineDetails.tsx
@@ -194,7 +194,7 @@ export const InlineLogLineDetails = memo(({ logs, log, onResize, timeRange, time
 });
 InlineLogLineDetails.displayName = 'InlineLogLineDetails';
 
-export const LOG_LINE_DETAILS_HEIGHT = 35;
+export const LOG_LINE_DETAILS_HEIGHT = 45;
 
 const getStyles = (theme: GrafanaTheme2, mode: LogLineDetailsMode, showControls?: boolean) => ({
   inlineWrapper: css({
diff --git a/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx b/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx
index 8b22f72d828..59a576f26a7 100644
--- a/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx
+++ b/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx
@@ -237,7 +237,7 @@ export const LogLineDetailsHeader = ({ focusLogLine, log, search, onSearch }: Pr
           />
         )}
         <IconButton
-          name={detailsMode === 'inline' ? 'columns' : 'gf-layout-simple'}
+          name={detailsMode === 'inline' ? 'web-section' : 'gf-layout-simple'}
           tooltip={
             detailsMode === 'inline'
               ? t('logs.log-line-details.sidebar-mode', 'Anchor to the right')
diff --git a/public/app/features/logs/components/panel/LogList.tsx b/public/app/features/logs/components/panel/LogList.tsx
index 0cb9f310efc..4b99b53ab78 100644
--- a/public/app/features/logs/components/panel/LogList.tsx
+++ b/public/app/features/logs/components/panel/LogList.tsx
@@ -109,7 +109,7 @@ export const LogList = ({
   displayedFields,
   containerElement,
   logOptionsStorageKey,
-  detailsMode = logOptionsStorageKey ? (store.get(`${logOptionsStorageKey}.detailsMode`) ?? 'sidebar') : 'sidebar',
+  detailsMode,
   dedupStrategy,
   enableLogDetails,
   eventBus,
diff --git a/public/app/features/logs/components/panel/LogListContext.tsx b/public/app/features/logs/components/panel/LogListContext.tsx
index 512a2fc6580..dda8fed0c4b 100644
--- a/public/app/features/logs/components/panel/LogListContext.tsx
+++ b/public/app/features/logs/components/panel/LogListContext.tsx
@@ -199,7 +199,10 @@ export const LogListContextProvider = ({
   children,
   containerElement,
   enableLogDetails,
-  detailsMode: detailsModeProp,
+  logOptionsStorageKey,
+  detailsMode: detailsModeProp = logOptionsStorageKey
+    ? store.get(`${logOptionsStorageKey}.detailsMode`)
+    : getDefaultDetailsMode(containerElement),
   dedupStrategy,
   displayedFields,
   filterLevels,
@@ -209,7 +212,6 @@ export const LogListContextProvider = ({
   logs,
   logLineMenuCustomItems,
   logsMeta,
-  logOptionsStorageKey,
   logSupportsContext,
   noInteractions,
   onClickFilterLabel,
@@ -258,7 +260,9 @@ export const LogListContextProvider = ({
   const [detailsWidth, setDetailsWidthState] = useState(
     getDetailsWidth(containerElement, logOptionsStorageKey, undefined, detailsModeProp, showControls)
   );
-  const [detailsMode, setDetailsMode] = useState<LogLineDetailsMode>(detailsModeProp ?? 'sidebar');
+  const [detailsMode, setDetailsMode] = useState<LogLineDetailsMode>(
+    detailsModeProp ?? getDefaultDetailsMode(containerElement)
+  );
   const [isAssistantAvailable, openAssistant] = useAssistant();
   const [prettifyJSON, setPrettifyJSONState] = useState(prettifyJSONProp);
   const [wrapLogMessage, setWrapLogMessageState] = useState(wrapLogMessageProp);
@@ -745,3 +749,8 @@ ${log.entry.replaceAll('`', '\\`')}
     ],
   });
 }
+
+export function getDefaultDetailsMode(container: HTMLDivElement | undefined): LogLineDetailsMode {
+  const width = container?.clientWidth ?? window.innerWidth;
+  return width > 1440 ? 'sidebar' : 'inline';
+}
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 731526b943d..a8b2c1beaa3 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -9446,9 +9446,9 @@
       "type": {
         "loki": {
           "indexed-label_one": "Indexed label",
-          "indexed-label_other": "Indexed label",
+          "indexed-label_other": "Indexed labels",
           "parsedl-label_one": "Parsed field",
-          "parsedl-label_other": "Parsed field",
+          "parsedl-label_other": "Parsed fields",
           "structured-metadata_one": "Structured metadata",
           "structured-metadata_other": "Structured metadata"
         }