# 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:** 17
**Page:** 1
### Author:  [@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")
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.
Selection and contextmenu covers the options popup menu
* * *
I moved the editor button bar section to the bottom of the editor on mobile and also changed the options popup menu position.
Desktop
Mobile
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;
}
}
}
}
```
---
### Author:  [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [January 14, 2023, 2:23am UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/2 "2023-01-14T02:23:44Z")
that’s great, thank you very much. It’s just a small change, but it makes the mobile experience really great 🥰
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [January 14, 2023, 3:21am UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/3 "2023-01-14T03:21:02Z")
Yeah, I’ve had the same problems and this would be an excellent improvement.
I feel a theme component coming on…
---
### Author:  [@jidanni](https://meta.discourse.org/u/jidanni)
#### Post date: [February 25, 2023, 10:06pm UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/4 "2023-02-25T22:06:00Z")
Sounds wonderful. Please also test on devices where you only have three lines in the input window. Not about 12 as in your first screenshot. [Such a tiny window to edit here on a cell phone](https://meta.discourse.org/t/such-a-tiny-window-to-edit-here-on-a-cell-phone/255225)
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 22, 2024, 5:28pm UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/5 "2024-08-22T17:28:25Z")
I really liked that solution, but it isn’t playing nicely with AI helper anymore 😢
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [August 22, 2024, 6:39pm UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/6 "2024-08-22T18:39:09Z")
Hi Don,
Was wondering if you might have a solution for mobile Android Keyboard.
On Google Pixel 8 and possibly other android phones. When using the code editor in #Customization > Theme & #Customization > Theme component, the keyboard covers the area being inputted if there is a lot of code and bottom areas. This also happens in the code editor for the new Form-templates.
If I am understanding this can likely be fixed by adding padding to the bottom? So keyboard is only covering empty area?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 22, 2024, 11:02pm UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/7 "2024-08-22T23:02:57Z")
Hello 👋
I’ve placed the AI to top right. I think it won’t interfere anything and the expanded options is full width top. I disabled the animations to prevent flashing while selecting. Not too tested code but something… I think it should work iPhone too but I didn’t test it so please test before go live. The composer is always in full height.
Mobile / CSS
```scss
.fk-d-menu {
&[data-identifier=ai-composer-helper-menu] {
position: fixed;
display: block;
max-width: 730px !important;
width: 100%;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%);
animation: none;
.fk-d-menu__inner-content {
background-color: transparent;
border: none;
box-shadow: none;
}
.ai-composer-helper-menu {
width: 100%;
.ai-custom-prompt {
&__input[type=text] {
width: 100%;
}
}
.ai-helper-loading {
display: flex;
justify-content: center;
}
.ai-helper-button-group {
justify-content: center;
}
&:not(.is-expanded) {
position: unset;
background: none;
width: 100%;
right: 0;
padding: 0;
ul {
position: absolute;
right: 8px;
button {
background: var(--secondary);
border: none;
border-radius: var(--d-button-border-radius);
box-shadow: 0 0 0 1px var(--primary-medium);
width: 4.5em;
height: 1.7em;
margin-top: calc(var(--header-offset) + 8px);
animation: none;
.d-icon {
margin-right: 0.45em;
}
.d-button-label {
display: block;
color: var(--primary-high);
font-weight: 600;
}
}
}
}
}
}
}
#reply-control.open {
height: 100%;
}
```
* * *
@Heliosurge, I am not sure about this but if it’s a common issue or core issue than I think it worth to open a new #Contribute > UX topic with some screenshots / video… 🙂
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 22, 2024, 11:32pm UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/9 "2024-08-22T23:32:44Z")
It works on iPhone, but the cog opens funny. It opens inside button bar.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [August 23, 2024, 12:52am UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/10 "2024-08-23T00:52:20Z")
Will do thanks Don! 👍
Added this code to add support for Character count component.
**Mobile CSS**
```plaintext
//* Moves character count above bottom composer bar
.character-counts {
bottom: 2.5em !important;
}
```
Prior to adding this the character count and composer bar overlapped each other
Result
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 23, 2024, 5:51am UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/11 "2024-08-23T05:51:54Z")
And thought you moved tool bar up. But it should still be down? Well, in iPhone it is up, but is scrollable.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 23, 2024, 6:09am UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/12 "2024-08-23T06:09:43Z")
> [@Jagster](#):
>
> the cog opens funny. It opens inside button bar.
That is by design I think. See the last video in OP.
> [@Jagster](#):
>
> And thought you moved tool bar up. But it should still be down?
The last code I share is only for the AI button positioning it’s an additional for the OP codes. But of course, you can use it separately too. 🙂
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 23, 2024, 6:11am UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/13 "2024-08-23T06:11:45Z")
Additional? Ok, I replaced totally mobile section 😝
**edit**
I got button bar where it should be and working as it should after using all snippets, from OP and new one. But now I don’t have AI-icon anymore 🤦♂️
**edit2**
When I tap the hamburger of the composer, aka. hiding the button bar, AI-icon pops up.
And cog iPad doesn’t do anything.
Does that sound any better than those my earlier crazy stuff?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 23, 2024, 7:39am UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/14 "2024-08-23T07:39:32Z")
Yeah, it seems not work with reverse column or other ordering. So I think if it isn’t work with this then we can’t do too much to combine these two modification. 😕
> [@Don](#):
>
> ```plaintext
> .d-editor-textarea-wrapper {
> flex-direction: column-reverse;
>
> ```
I’ll looking for a new workaround to makes it work and redesign things a little bit…
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 23, 2024, 7:46am UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/15 "2024-08-23T07:46:38Z")
Bummer. Because for me, as a layman, that sounds like change of Discourse how to show AI helper broke several things in Apple-devices, because your solution worked earlier 🤔
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [August 27, 2024, 8:28am UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/16 "2024-08-27T08:28:54Z")
Have you pressed the cog on the composer recently? We added a shortcut and link to proofreading there, which is very easy to use on mobile.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 27, 2024, 8:38am UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/17 "2024-08-27T08:38:01Z")
I have not. Quite nice, I should use proofreading more often because then I may not violate English so badly.
And yet I’m missing other options that AI helper offer. But sure, the cog solution is easy to use indeed.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 21, 2025, 10:53pm UTC](https://meta.discourse.org/t/composer-button-bar-suggestions/251059/18 "2025-01-21T22:53:00Z")
Hey Don
Think the code may need an update as the bar no longer scrolls for items not visible on bar.