From add8beefad4eb330c2a6ce05710510bc8ad7428e Mon Sep 17 00:00:00 2001
From: Gareth <email@garethdawson.xyz>
Date: Fri, 3 Oct 2025 15:06:25 +0800
Subject: [PATCH] Logs: Fix spacing between the logs volume and logs panel
 (#111952)

Logs: fix spacing between volume and logs panel
---
 public/app/features/explore/Explore.tsx   |  2 +-
 public/app/features/explore/Logs/Logs.tsx | 49 +++++++++++++----------
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index f9660d5833a..07a02cc17ae 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -77,7 +77,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: 'exploreMain',
       // Is needed for some transition animations to work.
       position: 'relative',
-      marginTop: '21px',
+      marginTop: theme.spacing(3),
       display: 'flex',
       flexDirection: 'column',
       gap: theme.spacing(1),
diff --git a/public/app/features/explore/Logs/Logs.tsx b/public/app/features/explore/Logs/Logs.tsx
index fd1d23675c5..3c505a5aeea 100644
--- a/public/app/features/explore/Logs/Logs.tsx
+++ b/public/app/features/explore/Logs/Logs.tsx
@@ -799,28 +799,30 @@ const UnthemedLogs: React.FunctionComponent<Props> = (props: Props) => {
           onClickHideField={hideField}
         />
       )}
-      <PanelChrome
-        title={t('explore.unthemed-logs.title-logs-volume', 'Logs volume')}
-        collapsible
-        collapsed={!logsVolumeEnabled}
-        onToggleCollapse={onToggleLogsVolumeCollapse}
-      >
-        {logsVolumeEnabled && (
-          <LogsVolumePanelList
-            toggleLegendRef={toggleLegendRef}
-            absoluteRange={absoluteRange}
-            width={width}
-            logsVolumeData={logsVolumeData}
-            onUpdateTimeRange={onChangeTime}
-            timeZone={timeZone}
-            splitOpen={splitOpen}
-            onLoadLogsVolume={loadLogsVolumeData}
-            onDisplayedSeriesChanged={onDisplayedSeriesChanged}
-            eventBus={logsVolumeEventBus}
-            onClose={() => onToggleLogsVolumeCollapse(true)}
-          />
-        )}
-      </PanelChrome>
+      <div className={styles.logsVolumePanel}>
+        <PanelChrome
+          title={t('explore.unthemed-logs.title-logs-volume', 'Logs volume')}
+          collapsible
+          collapsed={!logsVolumeEnabled}
+          onToggleCollapse={onToggleLogsVolumeCollapse}
+        >
+          {logsVolumeEnabled && (
+            <LogsVolumePanelList
+              toggleLegendRef={toggleLegendRef}
+              absoluteRange={absoluteRange}
+              width={width}
+              logsVolumeData={logsVolumeData}
+              onUpdateTimeRange={onChangeTime}
+              timeZone={timeZone}
+              splitOpen={splitOpen}
+              onLoadLogsVolume={loadLogsVolumeData}
+              onDisplayedSeriesChanged={onDisplayedSeriesChanged}
+              eventBus={logsVolumeEventBus}
+              onClose={() => onToggleLogsVolumeCollapse(true)}
+            />
+          )}
+        </PanelChrome>
+      </div>
       <PanelChrome
         titleItems={[
           config.featureToggles.logsExploreTableVisualisation ? (
@@ -1278,6 +1280,9 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean, tableHeight: n
       overflow: 'visible',
       ...(config.featureToggles.logsInfiniteScrolling && { marginBottom: '0px' }),
     }),
+    logsVolumePanel: css({
+      marginBottom: theme.spacing(1.5),
+    }),
   };
 };