What changes on mobile

• Compact toolbar — only essential buttons (bold, italic, link, lists, undo) on one row; everything else via the overflow menu.
• 44×44 tap targets, meeting WCAG 2.5.5.
• Toolbar scrolls horizontally if buttons overflow — no wrapping, no vertical space lost.
• Sticky toolbar stays pinned while content scrolls and the virtual keyboard opens.
• Bottom-sheet dropdowns for font, color, insert menus — never clip off-screen.
• Full-width dialogs for link / image / Ask AI with 8px safe-area margins.
• Floating paragraph toolbar disabled — it fought the iOS keyboard.
• 16px content font so iOS doesn’t auto-zoom when a user taps into the editor.

Enable it

One Tag Helper attribute. The editor automatically swaps in the mobile toolbar when the viewport is narrow.

<richtextbox asp-for="Body" toolbar="full"
             enable-mobile-toolbar="true" />

Emits <link rel="stylesheet" href="…/rte_mobile.css" />, sets config.toolbarMobile = "mobile", and provides a sensible default toolbar_mobile item list. Desktop viewers still see the full toolbar you configured.

Customize the mobile button list

// In your editor config
{
    toolbar: "full",                                // desktop
    toolbarMobile: "mobile",                        // picks config.toolbar_mobile
    toolbar_mobile: "{bold,italic,underline}|{link,unlink}|{insertorderedlist,insertunorderedlist}|undo",
    maxWidthForMobile: 720                          // viewport threshold (px)
}