fix: Comment action not visible on mobile formatting toolbar

app/editor/components/FloatingToolbar.tsx

@@ -223,6 +223,7 @@ const FloatingToolbar = React.forwardRef(function FloatingToolbar_(
       return (
         <ReactPortal>
           <MobileWrapper
+            ref={menuRef}
             style={{
               bottom: `calc(100% - ${height - rect.y}px)`,
             }}

app/editor/components/SelectionToolbar.tsx

@@ -100,10 +100,10 @@ export default function SelectionToolbar(props: Props) {
   const { view, commands } = useEditor();
   const dictionary = useDictionary();
   const menuRef = React.useRef<HTMLDivElement | null>(null);
-  const isActive = useIsActive(view.state);
+  const isMobile = useMobile();
+  const isActive = useIsActive(view.state) || isMobile;
   const isDragging = useIsDragging();
   const previousIsActive = usePrevious(isActive);
-  const isMobile = useMobile();
 
   React.useEffect(() => {
     // Trigger callbacks when the toolbar is opened or closed

app/editor/components/ToolbarMenu.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useMenuState } from "reakit";
 import { MenuButton } from "reakit/Menu";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { MenuItem } from "@shared/editor/types";
 import { s } from "@shared/styles";
 import ContextMenu from "~/components/ContextMenu";
@@ -123,6 +124,11 @@ const FlexibleWrapper = styled.div`
   overflow: hidden;
   display: flex;
   gap: 6px;
+
+  ${breakpoint("mobile", "tablet")`
+    justify-content: space-evenly;
+    align-items: baseline;
+  `}
 `;
 
 const Label = styled.span`