feat(console): improve responsiveness for QueryPicker component (#428)

The QueryPicker width is now 600px and it will automatically fit the screen when
its width is smaller.

ui/src/components/PopperHover/index.tsx

@@ -96,7 +96,7 @@ export const PopperHover = ({
 
       {ReactDOM.createPortal(
         <CSSTransition
-          classNames="popper-fade"
+          classNames="fade-reg"
           in={active}
           timeout={TransitionDuration.REG}
           unmountOnExit

ui/src/components/PopperToggle/index.tsx

@@ -105,7 +105,7 @@ export const PopperToggle = ({
 
       {React.isValidElement(children) && (
         <CSSTransition
-          classNames="popper-fade"
+          classNames="fade-reg"
           in={_active}
           timeout={TransitionDuration.REG}
           unmountOnExit

ui/src/index.tsx

@@ -30,16 +30,19 @@ const store = createStore(rootReducer, compose(applyMiddleware(epicMiddleware)))
 epicMiddleware.run(rootEpic)
 store.dispatch(actions.console.bootstrap())
 
-const GlobalTransitionStyles = createGlobalFadeTransition(
-  "popper-fade",
-  TransitionDuration.REG,
+const FadeReg = createGlobalFadeTransition("fade-reg", TransitionDuration.REG)
+
+const FadeSlow = createGlobalFadeTransition(
+  "fade-slow",
+  TransitionDuration.SLOW,
 )
 
 ReactDOM.render(
   <ScreenSizeProvider>
     <Provider store={store}>
       <ThemeProvider theme={theme}>
-        <GlobalTransitionStyles />
+        <FadeSlow />
+        <FadeReg />
         <Layout />
       </ThemeProvider>
     </Provider>

ui/src/scenes/Editor/Loader/index.tsx

@@ -2,18 +2,13 @@ import React, { useEffect, useRef, useState } from "react"
 import { CSSTransition } from "react-transition-group"
 import styled, { keyframes } from "styled-components"
 
-import { createGlobalFadeTransition, TransitionDuration } from "components"
+import { TransitionDuration } from "components"
 import { color } from "utils"
 
 type Props = Readonly<{
   show: boolean
 }>
 
-const GlobalTransitionStyles = createGlobalFadeTransition(
-  "editor-loader-fade",
-  TransitionDuration.SLOW,
-)
-
 const move = keyframes`
   0% {
     background-position: left bottom;
@@ -69,9 +64,8 @@ const Loader = ({ show }: Props) => {
 
   return (
     <>
-      <GlobalTransitionStyles />
       <CSSTransition
-        classNames="editor-loader-fade"
+        classNames="fade-slow"
         in={visible && show}
         timeout={TransitionDuration.SLOW}
         unmountOnExit

ui/src/scenes/Editor/QueryPicker/index.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components"
 import { DownArrowSquare } from "@styled-icons/boxicons-solid/DownArrowSquare"
 import { UpArrowSquare } from "@styled-icons/boxicons-solid/UpArrowSquare"
 
-import { Text, useKeyPress, useScreenSize } from "components"
+import { Text, useKeyPress } from "components"
 import { QueryShape } from "types"
 import { BusEvent, color } from "utils"
 
@@ -15,10 +15,11 @@ type Props = {
   ref: Ref<HTMLDivElement>
 }
 
-const Wrapper = styled.div<{ _width: number }>`
+const Wrapper = styled.div`
   display: flex;
-  max-height: ${({ _width }) => _width}px;
-  width: ${({ _width }) => _width}px;
+  max-height: 600px;
+  width: 600px;
+  max-width: 100vw;
   padding: 0.6rem 0;
   flex-direction: column;
   background: ${color("draculaBackgroundDarker")};
@@ -45,7 +46,6 @@ const QueryPicker = ({ hidePicker, queries, ref }: Props) => {
   const enterPress = useKeyPress("Enter", { preventDefault: true })
   const [cursor, setCursor] = useState(0)
   const [hovered, setHovered] = useState<QueryShape | undefined>()
-  const { sm } = useScreenSize()
 
   useEffect(() => {
     if (queries.length && downPress) {
@@ -75,7 +75,7 @@ const QueryPicker = ({ hidePicker, queries, ref }: Props) => {
   }, [hovered, queries])
 
   return (
-    <Wrapper _width={sm ? 370 : 600} ref={ref}>
+    <Wrapper ref={ref}>
       <Helper _style="italic" color="draculaForeground" size="xs">
         Navigate the list with <UpArrowSquare size="16px" />
         <DownArrowSquare size="16px" /> keys, exit with&nbsp;

ui/src/scenes/SideMenu/index.tsx

@@ -3,17 +3,12 @@ import { useDispatch, useSelector } from "react-redux"
 import { CSSTransition } from "react-transition-group"
 import styled from "styled-components"
 
-import { createGlobalFadeTransition, TransitionDuration } from "components"
+import { TransitionDuration } from "components"
 import { actions, selectors } from "store"
 import { color } from "utils"
 
 import Schema from "../Schema"
 
-const GlobalTransitionStyles = createGlobalFadeTransition(
-  "side-menu-backdrop-fade",
-  TransitionDuration.REG,
-)
-
 const WIDTH = 280
 
 const Backdrop = styled.div`
@@ -68,15 +63,15 @@ const SideMenu = () => {
 
   return (
     <>
-      {opened && <GlobalTransitionStyles />}
       <CSSTransition
-        classNames="side-menu-backdrop-fade"
+        classNames="fade-reg"
         in={opened}
         timeout={TransitionDuration.REG}
         unmountOnExit
       >
         <Backdrop onClick={handleBackdropClick} />
       </CSSTransition>
+
       <CSSTransition
         classNames="side-menu-slide"
         in={opened}