mobile: fix editor

packages/editor/src/extensions/font-size/font-size.ts

@@ -57,7 +57,6 @@ export const FontSize = Extension.create<FontSizeOptions>({
               if (!attributes.fontSize) {
                 return {};
               }
-
               return {
                 style: `font-size: ${attributes.fontSize}`
               };

packages/editor/src/toolbar/components/counter.tsx

@@ -37,7 +37,6 @@ function _Counter(props: CounterProps) {
         alignItems: "stretch",
         borderRadius: "default",
         overflow: "hidden",
-        height: "100%",
         cursor: "pointer",
         ":hover": {
           bg: "hover-secondary"
@@ -51,7 +50,10 @@ function _Counter(props: CounterProps) {
         title={`Decrease ${title}`}
         icon="minus"
         variant={"small"}
-        onClick={onDecrease}
+        onClick={(e) => {
+          e.stopPropagation();
+          onDecrease();
+        }}
       />
 
       <Text
@@ -71,7 +73,10 @@ function _Counter(props: CounterProps) {
         title={`Increase ${title}`}
         icon="plus"
         variant={"small"}
-        onClick={onIncrease}
+        onClick={(e) => {
+          e.stopPropagation();
+          onIncrease();
+        }}
       />
     </Flex>
   );

packages/editor/src/toolbar/components/more-tools.tsx

@@ -52,6 +52,7 @@ export function MoreTools(props: MoreToolsProps) {
       />
       <PopupWrapper
         isOpen={isOpen}
+        scope="editorToolbar"
         group={group || "toolbarGroup"}
         id={popupId}
         onClosed={onClosed}

packages/editor/src/toolbar/components/toolbar-group.tsx

@@ -39,8 +39,8 @@ export function ToolbarGroup(props: ToolbarGroupProps) {
     <Flex
       className="toolbar-group"
       sx={{
-        gap: "small",
-        p: "small",
+        gap: [0, 0, "small"],
+        p: ["4px", "4px", "small"],
         flexShrink: 0,
         ...sx
       }}

packages/editor/src/toolbar/popups/color-picker.tsx

@@ -238,7 +238,12 @@ export function ColorPicker(props: ColorPickerProps) {
           {onClose && (
             <Button
               variant={"icon"}
-              sx={{ display: ["block", "none"], px: 2 }}
+              sx={{
+                display: ["block", "none"],
+                px: 2,
+                width: "50px",
+                alignSelf: "center"
+              }}
               onClick={onClose}
             >
               <Icon path={Icons.close} size="big" />