chore(rtk-query): improve demo visibility on small devices

packages/redux-devtools-rtk-query-monitor/demo/src/App.css

@@ -1,46 +0,0 @@
-.App {
-  text-align: center;
-}
-.App code {
-  background: #fff3;
-  padding: 4px 8px;
-  border-radius: 4px;
-}
-.App p {
-  margin: 0.4rem;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx

@@ -4,7 +4,6 @@ import { Box, Flex, Heading } from '@chakra-ui/react';
 import { Link, UnorderedList, ListItem } from '@chakra-ui/react';
 import { Code } from '@chakra-ui/react';
 import * as React from 'react';
-import './styles.css';
 
 export function App() {
   return (

packages/redux-devtools-rtk-query-monitor/demo/src/DevTools.tsx

@@ -3,11 +3,15 @@ import { createDevTools } from '@redux-devtools/core';
 import DockMonitor from '@redux-devtools/dock-monitor';
 import RtkQueryMonitor from './build';
 
+const largeScreenQuery = window.matchMedia('(min-width: 1024px)');
+
 export default createDevTools(
   <DockMonitor
+    fluid
     toggleVisibilityKey="ctrl-h"
     changePositionKey="ctrl-q"
     changeMonitorKey="ctrl-m"
+    defaultSize={largeScreenQuery.matches ? 0.34 : 0.55}
   >
     <RtkQueryMonitor />
   </DockMonitor>

packages/redux-devtools-rtk-query-monitor/demo/src/styles.css

@@ -1,4 +0,0 @@
-.App {
-  font-family: sans-serif;
-  text-align: center;
-}