From 5382a520257402cd6e42a07b4e6e85894c382a9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=2E=20Mert=20Y=C4=B1ld=C4=B1ran?= <mehmet@up9.com>
Date: Thu, 11 Nov 2021 11:26:20 +0300
Subject: [PATCH] Fix the CSS issues in the cheatsheet modal (#448)

* Fix the CSS issues in the cheatsheet modal

* Change the Sass variable names
---
 ui/src/components/Filters.tsx               |  8 ++++----
 ui/src/components/style/Filters.module.sass | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/Filters.tsx b/ui/src/components/Filters.tsx
index d4e64b1a1..734bb126e 100644
--- a/ui/src/components/Filters.tsx
+++ b/ui/src/components/Filters.tsx
@@ -38,9 +38,9 @@ interface QueryFormProps {
 
 const style = {
     position: 'absolute',
-    top: '50%',
+    top: '10%',
     left: '50%',
-    transform: 'translate(-50%, -50%)',
+    transform: 'translate(-50%, 0%)',
     width: '80vw',
     bgcolor: 'background.paper',
     borderRadius: '5px',
@@ -214,7 +214,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, background
                                 language="python"
                             />
                         </Grid>
-                        <Divider orientation="vertical" flexItem />
+                        <Divider className={styles.divider1} orientation="vertical" flexItem />
                         <Grid item xs style={{margin: "10px"}}>
                             <Typography id="modal-modal-description">
                                 Since Mizu supports various protocols like gRPC, AMQP, Kafka and Redis. It's possible to write complex queries that match multiple protocols like this:
@@ -262,7 +262,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, background
                                 language="python"
                             />
                         </Grid>
-                        <Divider orientation="vertical" flexItem />
+                        <Divider className={styles.divider2} orientation="vertical" flexItem />
                         <Grid item xs style={{margin: "10px"}}>
                             <Typography id="modal-modal-description">
                                 There are a few helper methods included the in the filter language* to help building queries more easily.
diff --git a/ui/src/components/style/Filters.module.sass b/ui/src/components/style/Filters.module.sass
index b58795bad..a815d7a9d 100644
--- a/ui/src/components/style/Filters.module.sass
+++ b/ui/src/components/style/Filters.module.sass
@@ -31,3 +31,19 @@
     border: 1px solid #BCC6DD
   fieldset
     border: none
+
+$divider-breakpoint-1: 1474px
+$divider-breakpoint-2: 1366px
+$divider-breakpoint-3: 1980px
+
+@media (max-width: $divider-breakpoint-1)
+  .divider1
+    display: none
+
+@media (max-width: $divider-breakpoint-2)
+  .divider2
+    display: none
+
+@media (min-width: $divider-breakpoint-1) and (max-width: $divider-breakpoint-3)
+  .divider2
+    display: none