From 0fd6144969ecef31954bf28b553478fb7321aaea Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Wed, 9 Apr 2025 03:47:50 -0500
Subject: [PATCH] Logs Panel: panel options only tabbable after going through
 every log line (#103645)

fix: options only tabbable after going through every log line
---
 public/app/features/logs/components/ControlledLogRows.tsx   | 3 ++-
 public/app/features/logs/components/ControlledLogsTable.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/features/logs/components/ControlledLogRows.tsx b/public/app/features/logs/components/ControlledLogRows.tsx
index 020f7af0351..dba49b9df09 100644
--- a/public/app/features/logs/components/ControlledLogRows.tsx
+++ b/public/app/features/logs/components/ControlledLogRows.tsx
@@ -105,6 +105,7 @@ const LogRowsComponent = ({ loading, loadMoreLogs, deduplicatedRows = [], range,
 
   return (
     <div className={styles.logRowsContainer}>
+      <LogListControls eventBus={eventBus} />
       <div
         ref={scrollElementRef}
         className={config.featureToggles.logsInfiniteScrolling ? styles.scrollableLogRows : styles.logRows}
@@ -133,7 +134,6 @@ const LogRowsComponent = ({ loading, loadMoreLogs, deduplicatedRows = [], range,
           />
         </InfiniteScroll>
       </div>
-      <LogListControls eventBus={eventBus} />
     </div>
   );
 };
@@ -159,5 +159,6 @@ const styles = {
   }),
   logRowsContainer: css({
     display: 'flex',
+    flexDirection: 'row-reverse',
   }),
 };
diff --git a/public/app/features/logs/components/ControlledLogsTable.tsx b/public/app/features/logs/components/ControlledLogsTable.tsx
index 0105e14411d..5dfb5b5f6a7 100644
--- a/public/app/features/logs/components/ControlledLogsTable.tsx
+++ b/public/app/features/logs/components/ControlledLogsTable.tsx
@@ -34,6 +34,7 @@ export const ControlledLogsTable = ({
 
   return (
     <div className={styles.logRowsContainer}>
+      <LogListControls eventBus={eventBus} visualisationType={visualisationType} />
       <div className={styles.logRows} data-testid="logRowsTable">
         {/* Width should be full width minus logs navigation and padding */}
         <LogsTableWrap
@@ -51,7 +52,6 @@ export const ControlledLogsTable = ({
           datasourceType={datasourceType}
         />
       </div>
-      <LogListControls eventBus={eventBus} visualisationType={visualisationType} />
     </div>
   );
 };
@@ -64,6 +64,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     logRowsContainer: css({
       display: 'flex',
+      flexDirection: 'row-reverse',
     }),
   };
 };