revert visual change

public/app/features/explore/Logs.tsx

@@ -91,16 +91,6 @@ interface State {
   forceEscape: boolean;
 }
 
-// We need to override css overflow of divs in Collapse element to enable sticky Logs navigation
-const styleOverridesForStickyNavigation = css`
-  & > div {
-    overflow: visible;
-    & > div {
-      overflow: visible;
-    }
-  }
-`;
-
 class UnthemedLogs extends PureComponent<Props, State> {
   flipOrderTimer?: number;
   cancelFlippingTimer?: number;
@@ -336,7 +326,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
 
     return (
       <>
-        <Collapse label="Logs volume" collapsible isOpen={logsVolumeEnabled} onToggle={onSetLogsVolumeEnabled}>
+        <Collapse label="Volume" collapsible isOpen={logsVolumeEnabled} onToggle={onSetLogsVolumeEnabled}>
           {logsVolumeEnabled && (
             <LogsVolumePanel
               absoluteRange={absoluteRange}
@@ -359,7 +349,6 @@ class UnthemedLogs extends PureComponent<Props, State> {
             />
           )}
         </Collapse>
-        <Collapse label="Logs" loading={loading} isOpen className={styleOverridesForStickyNavigation}>
         <div className={styles.logOptions} ref={this.topLogsRef}>
           <InlineFieldRow>
             <InlineField label="Time" className={styles.horizontalInlineLabel} transparent>
@@ -498,7 +487,6 @@ class UnthemedLogs extends PureComponent<Props, State> {
             </Button>
           </div>
         )}
-        </Collapse>
       </>
     );
   }

public/app/features/explore/LogsContainer.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
@@ -103,6 +104,16 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
       return null;
     }
 
+    // We need to override css overflow of divs in Collapse element to enable sticky Logs navigation
+    const styleOverridesForStickyNavigation = css`
+      & > div {
+        overflow: visible;
+        & > div {
+          overflow: visible;
+        }
+      }
+    `;
+
     return (
       <>
         <LogsCrossFadeTransition visible={isLive}>
@@ -122,6 +133,7 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
           </Collapse>
         </LogsCrossFadeTransition>
         <LogsCrossFadeTransition visible={!isLive}>
+          <Collapse label="Logs" loading={loading} isOpen className={styleOverridesForStickyNavigation}>
             <Logs
               exploreId={exploreId}
               datasourceType={this.props.datasourceInstance?.type}
@@ -153,6 +165,7 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
               addResultsToCache={() => addResultsToCache(exploreId)}
               clearCache={() => clearCache(exploreId)}
             />
+          </Collapse>
         </LogsCrossFadeTransition>
       </>
     );