# Composer button bar suggestions

**URL:** https://meta.discourse.org/t/composer-button-bar-suggestions/251059
**Category:** UX
**Tags:** composer
**Created:** [January 8, 2023, 3:51pm UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059 "2023-01-08T15:51:54Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 8, 2023, 3:51pm UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/1 "2023-01-08T15:51:54Z")

</div>

Hello,

This is a common issue on our forum. The native mobile context menu and selection is make complicate to use the editor button bar. So I made some _hacky_ changes _(need more work)_ but I think this is good, for an idea… 🙂  
I show an example.

Context menu covers the editor button bar.

 ![Screenshot_20230108_041530_com.android.chrome](https://global.discourse-cdn.com/meta/original/4X/2/0/c/20cf83078c055a6ba43fe5e7f4eb4dec35e12d7f.jpeg)

Selection and contextmenu covers the options popup menu

 ![Screenshot_20230108_041646_com.android.chrome](https://global.discourse-cdn.com/meta/original/4X/2/a/0/2a0dc139c6366b1f40f4b58fac330ee63078bd7e.jpeg)

* * *

I moved the editor button bar section to the bottom of the editor on mobile and also changed the options popup menu position.

Desktop

 ![Screenshot 2023-01-08 at 16.07.47](https://global.discourse-cdn.com/meta/original/4X/b/e/6/be6ec4030703d88c6b8594500e5f1119ca985b22.png)

Mobile

 ![Screenshot_20230108_160152_com.android.chrome](https://global.discourse-cdn.com/meta/original/4X/9/b/c/9bc88d9a7c15ec3e9c5c6d21d2b4dbee0041f2a7.jpeg)

This way the native selection and contextmenu elements won’t cover this part.

Common \> CSS

```scss
.d-editor-textarea-wrapper {
  .d-editor-button-bar {
    display: flex;
    overflow-x: auto;
    background: var(--primary-very-low);
    .btn,
    .select-kit {
      flex: 1;
      color: var(--primary-high);
    }
    // Popup menu
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      .select-kit-row {
        .d-icon {
          color: var(--primary-high);
        }
        .texts {
          .name {
            color: var(--primary-high);
          }
        }
      }
    }
  }
}

```

Mobile \> CSS

```scss
#reply-control {
  .submit-panel {
    margin-top: 1em;
  }
}

.d-editor-textarea-wrapper {
  flex-direction: column-reverse;
  .d-editor-input {
    // Bigger padding on bottom to prevent the last line selection covers the buttons bar
    padding-bottom: 1.75em;
  }
  .d-editor-button-bar {
    border-top: 1px solid var(--primary-low);
    border-bottom: none;
    // Popup menu
    .select-kit.dropdown-select-box.toolbar-popup-menu-options {
      position: static;
      .select-kit-filter {
        display: none;
      }
      .select-kit-body {
        transform: none !important;
        top: auto !important;
        bottom: 0 !important;
        flex-direction: row;
        justify-content: flex-start;
        max-width: 100%;
        width: 100% !important;
        overflow-x: auto;
        background: var(--primary-very-low);
        border: none;
      }
      .select-kit-row {
        padding: 0.5em 0.65em;
        border: 1px solid transparent;
        border-top: none;
      }
      .select-kit-collection {
        display: contents;
      }
    }
  }
}

```

---

_[View the full topic](https://meta.discourse.org/t/composer-button-bar-suggestions/251059)._