chore(rtk-query): improve responsiveness

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx

@@ -54,8 +54,11 @@ const AddPost = () => {
   return (
     <Flex p={'5px 0'} flexDirection="row" flexWrap="wrap" maxWidth={'85%'}>
       <Box flex={'5 0 auto'} padding="0 5px 0 0">
-        <FormControl flexDirection="column" isInvalid={Boolean(post.name.length < 3 && post.name)}>
+        <FormControl
-          <FormLabel  htmlFor="name">Post name</FormLabel>
+          flexDirection="column"
+          isInvalid={Boolean(post.name.length < 3 && post.name)}
+        >
+          <FormLabel htmlFor="name">Post name</FormLabel>
           <Input
             id="name"
             name="name"

packages/redux-devtools-rtk-query-monitor/src/components/QueryList.tsx

@@ -40,7 +40,7 @@ export class QueryList extends PureComponent<QueryListProps> {
                     isSelected
                   )}
                 >
-                  <p>{queryInfo.queryKey}</p>
+                  <p {...styling('queryListItemKey')}>{queryInfo.queryKey}</p>
                   <p {...styling('queryStatus')}>{queryInfo.query.status}</p>
                 </li>
               );

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewHeader.tsx

@@ -37,7 +37,9 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
                     tab.value === selectedTab
                   )}
                 >
-                  {renderTabLabel ? renderTabLabel(tab) : tab.label}
+                  <span>
+                    {renderTabLabel ? renderTabLabel(tab) : tab.label}
+                  </span>
                 </div>
               ))}
             </div>

packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts

@@ -118,20 +118,24 @@ const getSheetFromColorMap = (map: ColorMap) => {
       padding: '5px 10px',
       cursor: 'pointer',
       'user-select': 'none',
-
-      '& > :first-child': {
-        whiteSpace: 'nowrap',
-        overflowX: 'hidden',
-        maxWidth: 'calc(100% - 70px)',
-        textOverflow: 'ellipsis',
-      },
       '&:last-child': {
         'border-bottom-width': 0,
       },
-
+      overflow: 'hidden',
+      maxHeight: 47,
       'border-bottom-color': map.BORDER_COLOR,
     },
 
+    queryListItemKey: {
+      display: '-webkit-box',
+      boxOrient: 'vertical',
+      '-webkit-line-clamp': 2,
+      whiteSpace: 'normal',
+      overflow: 'hidden',
+      maxWidth: 'calc(100% - 70px)',
+      wordBreak: 'break-all',
+    },
+
     queryListHeader: {
       display: 'flex',
       padding: 4,
@@ -162,8 +166,13 @@ const getSheetFromColorMap = (map: ColorMap) => {
     },
 
     tabSelector: {
-      display: 'inline-flex',
+      display: 'flex',
-      float: 'right',
+      width: '100%',
+      justifyContent: 'flex-end',
+      overflow: 'hidden',
+      '& > *': {
+        flex: '0 1 auto',
+      },
     },
 
     srOnly: {
@@ -180,7 +189,10 @@ const getSheetFromColorMap = (map: ColorMap) => {
     selectorButton: {
       cursor: 'pointer',
       position: 'relative',
-      padding: '6.5px 8px',
+      height: '33px',
+      padding: '0 8px',
+      display: 'inline-flex',
+      alignItems: 'center',
       color: map.TEXT_COLOR,
       'border-style': 'solid',
       'border-width': '1px',
@@ -204,6 +216,16 @@ const getSheetFromColorMap = (map: ColorMap) => {
       },
 
       'border-color': map.TAB_BORDER_COLOR,
+
+      '& > *': {
+        display: '-webkit-box',
+        boxOrient: 'vertical',
+        '-webkit-line-clamp': 1,
+        overflow: 'hidden',
+        wordBreak: 'break-all',
+        '-webkit-box-pack': 'end',
+        paddingBottom: 0,
+      },
     },
 
     selectorButtonSmall: {