From 1b1f2475c29c54385d9d682fa231fd0937e3beba Mon Sep 17 00:00:00 2001
From: Gareth Dawson <gareth.dawson@grafana.com>
Date: Tue, 13 Dec 2022 11:09:30 +0000
Subject: [PATCH] Loki: Set custom width for modals in the loki query editor
 (#59714)

* set custom width for modals in the loki query editor

* convert unit from px to vw

* add media query for smaller devices

* use theme breakpoints instead of @media
---
 .../components/LabelBrowserModal.tsx          | 20 ++++++++++++++++---
 .../components/QueryPatternsModal.tsx         |  8 +++++++-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx
index beba91e8255..3c79b9f9fd7 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx
@@ -1,8 +1,9 @@
+import { css } from '@emotion/css';
 import React, { useState, useEffect } from 'react';
 
-import { CoreApp } from '@grafana/data';
+import { CoreApp, GrafanaTheme2 } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import { LoadingPlaceholder, Modal } from '@grafana/ui';
+import { LoadingPlaceholder, Modal, useStyles2 } from '@grafana/ui';
 import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
 
 import { LokiLabelBrowser } from '../../components/LokiLabelBrowser';
@@ -25,6 +26,8 @@ export const LabelBrowserModal = (props: Props) => {
   const [hasLogLabels, setHasLogLabels] = useState(false);
   const LAST_USED_LABELS_KEY = 'grafana.datasources.loki.browser.labels';
 
+  const styles = useStyles2(getStyles);
+
   useEffect(() => {
     if (!isOpen) {
       return;
@@ -57,7 +60,7 @@ export const LabelBrowserModal = (props: Props) => {
   };
 
   return (
-    <Modal isOpen={isOpen} title="Label browser" onDismiss={reportInteractionAndClose}>
+    <Modal isOpen={isOpen} title="Label browser" onDismiss={reportInteractionAndClose} className={styles.modal}>
       {!labelsLoaded && <LoadingPlaceholder text="Loading labels..." />}
       {labelsLoaded && !hasLogLabels && <p>No labels found.</p>}
       {labelsLoaded && hasLogLabels && (
@@ -79,3 +82,14 @@ export const LabelBrowserModal = (props: Props) => {
     </Modal>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    modal: css`
+      width: 85vw;
+      ${theme.breakpoints.down('md')} {
+        width: 100%;
+      }
+    `,
+  };
+};
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx b/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
index 265626fe454..f2dbd821133 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
@@ -66,7 +66,7 @@ export const QueryPatternsModal = (props: Props) => {
   };
 
   return (
-    <Modal isOpen={isOpen} title="Kick start your query" onDismiss={onClose}>
+    <Modal isOpen={isOpen} title="Kick start your query" onDismiss={onClose} className={styles.modal}>
       <div className={styles.spacing}>
         Kick start your query by selecting one of these queries. You can then continue to complete your query.
       </div>
@@ -121,5 +121,11 @@ const getStyles = (theme: GrafanaTheme2) => {
     spacing: css`
       margin-bottom: ${theme.spacing(1)};
     `,
+    modal: css`
+      width: 85vw;
+      ${theme.breakpoints.down('md')} {
+        width: 100%;
+      }
+    `,
   };
 };