From f515d2efac72b8d930c2c5bdb1bd383bd44151da Mon Sep 17 00:00:00 2001
From: Simon Podlipsky <simon@podlipsky.net>
Date: Fri, 26 May 2023 10:07:09 +0200
Subject: [PATCH] [Timeseries] Place legend to bottom when on <lg display
 (#69045)

Place timeseries legend to bottom when on <lg display
---
 .../grafana-ui/src/components/VizLayout/VizLayout.tsx    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
index 05018fbeeed..d1ce27ef82e 100644
--- a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
+++ b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
@@ -5,7 +5,7 @@ import { useMeasure } from 'react-use';
 import { GrafanaTheme2 } from '@grafana/data';
 import { LegendPlacement } from '@grafana/schema';
 
-import { useStyles2 } from '../../themes/ThemeContext';
+import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
 
@@ -30,6 +30,7 @@ export interface VizLayoutComponentType extends FC<VizLayoutProps> {
  * @beta
  */
 export const VizLayout: VizLayoutComponentType = ({ width, height, legend, children }) => {
+  const theme = useTheme2();
   const styles = useStyles2(getVizStyles);
   const containerStyle: CSSProperties = {
     display: 'flex',
@@ -50,7 +51,11 @@ export const VizLayout: VizLayoutComponentType = ({ width, height, legend, child
     );
   }
 
-  const { placement, maxHeight = '35%', maxWidth = '60%' } = legend.props;
+  let { placement, maxHeight = '35%', maxWidth = '60%' } = legend.props;
+
+  if (document.body.clientWidth < theme.breakpoints.values.lg) {
+    placement = 'bottom';
+  }
 
   let size: VizSize | null = null;