New topic’s edit area is small for mobile user

Hello, I ma thinking is that possible to do not sure area enclosed in a red frame in default for mobile sure?
Which file/part shoule I change?
Thanks you.

1 Like

The main issue you have is with zoom level/text size on your phone and/or your browser.

This is what my screen looks like when replying to you on my Pixel 6a (a small phone!)

You can hide the tool bar with the hamburger button.


But… there is more :wink:

  • fast edit doesn’t work in images :man_facepalming: so: of = if

Though the screenshot in the OP is a topic edit I think, and the topic title, category and tag boxes also take up extra space compared to a reply.


yea for replying is ok but for new topic is small


There’s also an existing ux topic with more discussion in if you’d like to add your thoughts to that:


You can hide the formatting toolbar (the area in your red frame) by clicking the burger icon (3 horizontal lines) at the top right.

1 Like

Yes, you are right. but not every new user know it. that makes it can be a UX issue.

You can try this little script. Add it to your theme or a new component HTML in the Head tab.

It hides the toolbar with the following conditions:

  • Only for new topics / editing topic first post / topic draft
  • Mobile view
  • if the user has no saved preference. [1]

The code doesn’t mess with the user’s preferences.

<script type="text/discourse-plugin" version="0.8">

const { on, observes } = require("discourse-common/utils/decorators");

const serviceComposer = api.container.lookup("service:composer");

function canUpdateToolbar(context) {
  return (
    // New topic / Editing first post / Topic draft 
    context._isNewTopic &&
    // Toolbar is not hidden
    context.showToolbar &&
    // Mobile view only &&
    // Do not override user's preference
    context.keyValueStore.get("toolbar-enabled") === undefined

function updateShowToolBar(value) {
  serviceComposer._wasToolbarEnabled = !value;
  // Hides the toolbar without remembering the state in the user's browser.
  serviceComposer._toolbarEnabled = value;
  // Refresh computed getter

api.modifyClass("component:composer-editor", {
  pluginId: "composer-editor-toolbar",

  _composerSwitchAction() {
    // Handles the situation when switching from a reply to a new topic
    // without closing the composer.
    if (canUpdateToolbar(this)) {

  _composerEditorInit() {`${this.composerEventPrefix}:will-open`, () => {
      if (canUpdateToolbar(this)) {


  _composerClosed() {

    // Restores the toolbar if it is manually hidden.
    if (serviceComposer._wasToolbarEnabled) {

  1. Once a user clicks on the toggle, the browser remembers the state ↩︎


Hi Arkshine, thx for you repley,
I added it into my theme’s head tab but it not working.
Am I did in a wrong way?

1 Like

Where is that needed? Tapping the hamburger does it natively — on iPhones anyway.

1 Like

So if not enough website shows because you’ve set text and interface size too big, this is a Chrome/Safari issue and Google/Apple is at fault?! :rofl:

Just change your interface preferences on your phone and you are done!

I think we’re discussing a lot of repeat info from Such a tiny window to edit here on a cell phone

Let’s close this off and concentrate the conversation there.