Opt-in stylesheet that reshapes the toolbar for phones and tablets. 44×44 tap targets,
horizontally-scrolling toolbar, sticky header so the virtual keyboard can't hide it, and
bottom-sheet mounting for dropdowns and dialogs. Enable with one Tag Helper attribute.
Phone-shaped frame for illustration. On an actual device, the sticky toolbar stays visible above the virtual keyboard.
What changes
Tap targets : minimum 44×44px, meeting WCAG 2.5.5.Toolbar scrolls horizontally instead of wrapping — no vertical space lost.Sticky toolbar stays pinned while content scrolls and the virtual keyboard opens.Bottom-sheet dropdowns : font, color, insert menus mount as slide-up sheets that never clip off-screen.Full-width dialogs for link, image, Ask AI — with 8px safe-area margins.Review drawer (Comments / Track Changes) slides from the bottom instead of the right.Floating paragraph toolbar disabled — it fought the keyboard on iOS.16px content font so iOS doesn't auto-zoom when a user taps into the editor.
Enable it
<richtextbox asp-for="Body" toolbar="full"
enable-mobile-toolbar="true" />
Emits <link rel="stylesheet" href="…/rte_mobile.css" /> and adds class rte-mobile to the editor wrapper. Styles are scoped behind a media query so a desktop viewport won't pick them up even if the attribute is accidentally left on in production.
Or opt in globally
For a site-wide default (admin apps where every editor is on a phone first):
// _Layout.cshtml, once
<link rel="stylesheet" href="~/_content/RichTextBox/richtexteditor/rte_mobile.css" />
<body class="rte-mobile" >