Make the document field toolbar wrap (#4883)

* Make the document field toolbar wrap

.changeset/twelve-tools-care.md

@@ -0,0 +1,5 @@
+---
+"@keystone-next/fields-document": patch
+---
+
+Allowed the document field toolbar to wrap on smaller screens

packages-next/fields-document/src/DocumentEditor/primitives/toolbar.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 
 import { ButtonHTMLAttributes, HTMLAttributes, createContext, useContext, ReactNode } from 'react';
-import { Box, MarginProps, forwardRefWithAs, jsx, useTheme } from '@keystone-ui/core';
+import { Inline, MarginProps, forwardRefWithAs, jsx, useTheme } from '@keystone-ui/core';
 
 // Spacers and Separators
 // ------------------------------
@@ -43,20 +43,12 @@ const useToolbarGroupContext = () => useContext(ToolbarGroupContext);
 type ToolbarGroupProps = { direction?: DirectionType } & MarginProps &
   HTMLAttributes<HTMLDivElement>;
 export const ToolbarGroup = forwardRefWithAs<'div', ToolbarGroupProps>(
-  ({ direction = 'row', ...props }, ref) => {
-    const { spacing } = useTheme();
-
+  ({ children, direction = 'row', ...props }, ref) => {
     return (
       <ToolbarGroupContext.Provider value={{ direction }}>
-        <Box
-          ref={ref}
-          css={{
-            display: 'inline-grid',
-            gap: spacing.xxsmall,
-            gridAutoFlow: autoFlowDirection[direction],
-          }}
-          {...props}
-        />
+        <Inline ref={ref} {...props}>
+          {children}
+        </Inline>
       </ToolbarGroupContext.Provider>
     );
   }