# New topic’s edit area is small for mobile user

**URL:** <https://meta.discourse.org/t/new-topic-s-edit-area-is-small-for-mobile-user/288929>\
**Category:** Product Support\
**Created:** [December 16, 2023, 6:31pm UTC](https://meta.discourse.org/t/new-topic-s-edit-area-is-small-for-mobile-user/288929 "2023-12-16T18:31:10Z")\
**Posts on this page:** 1\
**Showing post:** 9

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [December 17, 2023, 3:53am UTC](https://meta.discourse.org/t/new-topic-s-edit-area-is-small-for-mobile-user/288929/9 "2023-12-17T03:53:58Z")

</div>

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.

```js
<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
    context.site.mobileView &&
    // 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
  serviceComposer.notifyPropertyChange("showToolbar");
}

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

  @observes("composer.action")
  _composerSwitchAction() {
    // Handles the situation when switching from a reply to a new topic
    // without closing the composer.
    if (canUpdateToolbar(this)) {
      updateShowToolBar(false);
    }
  },

  @on("didInsertElement")
  _composerEditorInit() {
    this.appEvents.one(`${this.composerEventPrefix}:will-open`, () => {
      if (canUpdateToolbar(this)) {
        updateShowToolBar(false);
      }
    });

    this._super(...arguments);
  },

  @on("willDestroyElement")
  _composerClosed() {
    this._super(...arguments);

    // Restores the toolbar if it is manually hidden.
    if (serviceComposer._wasToolbarEnabled) {
      updateShowToolBar(true);
    }
  },
});
</script>
```

* * *

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

---

_[View the full topic](https://meta.discourse.org/t/new-topic-s-edit-area-is-small-for-mobile-user/288929)._