fix: toolbar buttons peaking out of frame on mobile

Close #589

Author: devrsi0n

packages/ui/src/blocks/rich-text-editor/format-buttons.tsx

@@ -2,15 +2,15 @@ import { Editor } from '@tiptap/react';
 import clsx from 'clsx';
 import * as React from 'react';
 
-import { BaseButtonProps, BaseButton } from '../../components/button';
+import { BaseButton, BaseButtonProps } from '../../components/button';
 import {
+  Icon,
+  IconBlockQuote,
   IconBold,
   IconCode,
-  IconBlockQuote,
   IconItalic,
   IconList,
   IconUnderline,
-  Icon,
 } from '../../components/icons';
 import { Select } from '../../components/select';
 import { listHoverableColor } from '../../styles/common';
@@ -29,7 +29,7 @@ export const BaseMarkButton = React.forwardRef(function BaseMarkButton(
   return (
     <BaseButton
       className={clsx(
-        `rounded p-1.5 text-gray-1100`,
+        `flex gap-1 rounded p-1.5 text-gray-1100`,
         listHoverableColor,
         isActive && `bg-primary-300 text-primary-1000`,
         className,
@@ -72,14 +72,19 @@ type BlockButtonFormat = 'bulletList' | 'blockquote';
 export type BlockButtonProps = {
   format: BlockButtonFormat;
   editor: Editor;
+  children?: React.ReactNode;
 };
 
 const blockMap: Record<BlockButtonFormat, [Icon, string]> = {
   bulletList: [IconList, 'toggleBulletList'],
   blockquote: [IconBlockQuote, 'toggleBlockquote'],
 };
 
-export function BlockButton({ format, editor }: BlockButtonProps): JSX.Element {
+export function BlockButton({
+  format,
+  editor,
+  children,
+}: BlockButtonProps): JSX.Element {
   const [Icon, methodName] = blockMap[format];
   return (
     <BaseMarkButton
@@ -89,6 +94,7 @@ export function BlockButton({ format, editor }: BlockButtonProps): JSX.Element {
       }}
     >
       <Icon size={20} />
+      <span>{children}</span>
     </BaseMarkButton>
   );
 }

packages/ui/src/blocks/rich-text-editor/toolbar.tsx

@@ -3,7 +3,14 @@ import clsx from 'clsx';
 import * as React from 'react';
 
 import { Divider } from '../../components/divider';
-import { IconImage, IconLink2 } from '../../components/icons';
+import {
+  IconBlockQuote,
+  IconImage,
+  IconLink2,
+  IconList,
+  IconMoreVertical,
+} from '../../components/icons';
+import { Menu } from '../../components/menu';
 import { BlockButton, MarkButton } from './format-buttons';
 import { RTEPopoverButton } from './rte-popover-button';
 
@@ -32,7 +39,7 @@ export function Toolbar({
         <MarkButton editor={editor} format="italic" />
         <MarkButton editor={editor} format="underline" />
         <MarkButton editor={editor} format="code" />
-        <div className="hidden flex-row gap-1 xs:flex">
+        <div className="hidden flex-row items-center gap-1 [@media(min-width:470px)]:flex">
           <Divider vertical />
           <BlockButton editor={editor} format="bulletList" />
           <BlockButton editor={editor} format="blockquote" />
@@ -55,6 +62,35 @@ export function Toolbar({
             <IconImage size={20} />
           </RTEPopoverButton>
         </div>
+        <div className="flex flex-row items-center [@media(min-width:470px)]:hidden">
+          <Menu>
+            <Menu.Button
+              variant="text"
+              shape="square"
+              className="rounded p-1.5 text-gray-1100 hover:bg-gray-200"
+            >
+              <IconMoreVertical size={20} />
+            </Menu.Button>
+            <Menu.Items>
+              <Menu.Item
+                onClick={() => {
+                  editor.chain().focus().toggleBulletList().run();
+                }}
+              >
+                <IconList className="size-5" />
+                Bullet list
+              </Menu.Item>
+              <Menu.Item
+                onClick={() => {
+                  editor.chain().focus().toggleBlockquote().run();
+                }}
+              >
+                <IconBlockQuote className="size-5" />
+                Blockquote
+              </Menu.Item>
+            </Menu.Items>
+          </Menu>
+        </div>
       </div>
       {children}
     </div>

packages/ui/src/components/menu/menu.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import { bluredBg, listHoverable } from '../../styles/common';
 import { Box, BoxProps } from '../box';
-import { Button, IconButton } from '../button';
+import { Button, IconButton, type ButtonProps } from '../button';
 import { Divider } from '../divider';
 import styles from './menu.module.scss';
 
@@ -50,6 +50,7 @@ export type MenuButtonProps = {
   ariaLabel?: string;
   open?: boolean;
   onClick?(open?: boolean): void;
+  variant?: ButtonProps['variant'];
 };
 
 function MenuButton({