fix(form-builder): fix ui issues in PTE toolbar

sanity-io · Jan 11, 2022 · f35a010 · f35a010 · vercel · Jan 11, 2022
1 parent 680cc9f
commit f35a010
Showing 1 changed file with 32 additions and 34 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/PortableText/toolbar/Toolbar.tsx b/packages/@sanity/form-builder/src/inputs/PortableText/toolbar/Toolbar.tsx
@@ -32,25 +32,22 @@ const RootFlex = styled(Flex)`
 `
 
 const StyleSelectBox = styled(Box)`
-  min-width: 8em;
+  width: 8em;
 `
 
 const StyleSelectFlex = styled(Flex)`
   border-right: 1px solid var(--card-border-color);
 `
 
-const ActionMenuBox = styled(Box)<{$withMaxWidth: boolean}>`
-  ${({$withMaxWidth}) =>
-    $withMaxWidth &&
+const ActionMenuBox = styled(Box)<{$withInsertMenu: boolean}>`
+  ${({$withInsertMenu}) =>
+    $withInsertMenu &&
     css`
       max-width: max-content;
+      border-right: 1px solid var(--card-border-color);
     `}
 `
 
-const InsertMenuBox = styled(Box)`
-  border-left: 1px solid var(--card-border-color);
-`
-
 const FullscreenButtonBox = styled(Box)`
   border-left: 1px solid var(--card-border-color);
 `
@@ -102,32 +99,33 @@ const InnerToolbar = memo(function InnerToolbar({
         </StyleSelectBox>
       </StyleSelectFlex>
 
-      {showActionMenu && (
-        <ActionMenuBox
-          flex={collapsed ? undefined : 1}
-          padding={isFullscreen ? 2 : 1}
-          $withMaxWidth={showInsertMenu}
-        >
-          <ActionMenu
-            disabled={disabled}
-            collapsed={collapsed}
-            groups={actionGroups}
-            isFullscreen={isFullscreen}
-          />
-        </ActionMenuBox>
-      )}
-
-      {showInsertMenu && (
-        <InsertMenuBox flex={collapsed ? undefined : 1} padding={isFullscreen ? 2 : 1}>
-          <InsertMenu
-            disabled={disabled}
-            collapsed={collapsed}
-            items={insertMenuItems}
-            isFullscreen={isFullscreen}
-          />
-        </InsertMenuBox>
-      )}
-
+      <Flex flex={1}>
+        {showActionMenu && (
+          <ActionMenuBox
+            flex={collapsed ? undefined : 1}
+            padding={isFullscreen ? 2 : 1}
+            $withInsertMenu={showInsertMenu}
+          >
+            <ActionMenu
+              disabled={disabled}
+              collapsed={collapsed}
+              groups={actionGroups}
+              isFullscreen={isFullscreen}
+            />
+          </ActionMenuBox>
+        )}
+
+        {showInsertMenu && (
+          <Box flex={collapsed ? undefined : 1} padding={isFullscreen ? 2 : 1}>
+            <InsertMenu
+              disabled={disabled}
+              collapsed={collapsed}
+              items={insertMenuItems}
+              isFullscreen={isFullscreen}
+            />
+          </Box>
+        )}
+      </Flex>
       <FullscreenButtonBox padding={isFullscreen ? 2 : 1}>
         <Tooltip
           content={