diff --git a/ui/src/components/PopperHover/index.tsx b/ui/src/components/PopperHover/index.tsx
index fad8e9be34bf7e90d116b9a9af548d17177d9d2c..ca6c4bad8d0763293acc6d7f24c62c73d1bd5946 100644
--- a/ui/src/components/PopperHover/index.tsx
+++ b/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
diff --git a/ui/src/components/PopperToggle/index.tsx b/ui/src/components/PopperToggle/index.tsx
index 0cf946c70b4045bd242c3a0def9b3972468f7ae4..17c9706c9d5d88bb6900303540eb4238e9df6522 100644
--- a/ui/src/components/PopperToggle/index.tsx
+++ b/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
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 88b36e365e5b4dce570cb50b8a5825ad6bcd04c0..bd824072ebc1d67ffa018b3ce4c9ae1bded5f87f 100644
--- a/ui/src/index.tsx
+++ b/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>
diff --git a/ui/src/scenes/Editor/Loader/index.tsx b/ui/src/scenes/Editor/Loader/index.tsx
index e9365db9dc4d00bf9d395e507d09cce8a4b3cea9..73b0f67722f0cb881deb1dca21bdb37295e60162 100644
--- a/ui/src/scenes/Editor/Loader/index.tsx
+++ b/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
diff --git a/ui/src/scenes/Editor/QueryPicker/index.tsx b/ui/src/scenes/Editor/QueryPicker/index.tsx
index e355757f9b827ffffc3aba43008594786c6d0de8..ea5d9fc5299b843ed6f2cd7671d93b7de15b334e 100644
--- a/ui/src/scenes/Editor/QueryPicker/index.tsx
+++ b/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;
diff --git a/ui/src/scenes/SideMenu/index.tsx b/ui/src/scenes/SideMenu/index.tsx
index c6e47a57b860c9bf01570e06905f231a0f35dc98..aa17ce814622e2f2d446f3478f712ea2129bead9 100644
--- a/ui/src/scenes/SideMenu/index.tsx
+++ b/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}