New topic’s edit area is small for mobile user

Support
1

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.

image
image438×797 98 KB

1 Like
2

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!)

Screenshot_20231216-195624
Screenshot_20231216-1956241080×2400 135 KB

You can hide the tool bar with the hamburger button.

2 Likes
3

IMG_4756
IMG_4756750×1334 57.1 KB

But… there is more :wink:

IMG_4757
IMG_4757750×895 110 KB

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

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.

2 Likes
5

yea for replying is ok but for new topic is small

2 Likes
6

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

3 Likes
7

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
8

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

9

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
    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 ↩︎

2 Likes
10

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
11

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

1 Like
12

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!

Screenshot_20231217-114740
Screenshot_20231217-1147401080×1058 96.5 KB

13

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.

4 Likes