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

@@ -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',
   }),
 };

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',
     }),
   };
 };