Change Details

At some point a few years WMUI added vertical borders between toolbar buttons, which on desktop looks okay where the buttons are at least square or wider: {F30199815,width=500} With our new toolbar on mobile we are squeezing in more tools, making them narrow on some devices: {F30199841,width=100%} It may look less cramped if we just remove the borders: {F30199843,width=100%} Doing this highlights the uneven spacing between the icons due to the dropdown icons, although this can be tweaked by giving the dropdowns slightly more space (flex:1.2) like they have on desktop: {F30199839,width=100%} Comparison at different widths: |320|{F30199841,width=100%}|{F30199839,width=100%} |360|{F30199835,width=100%}|{F30199837,width=100%}

At some point a few years WMUI added vertical borders between toolbar buttons, which on desktop looks okay where the buttons are at least square or wider: {F30199815,width=500} With our new toolbar on mobile we are squeezing in more tools, making them narrow on some devices: {F30199841,width=100%} It may look less cramped if we just remove the borders: {F30199843,width=100%} Doing this highlights the uneven spacing between the icons due to the dropdown icons, although this can be tweaked by giving the dropdowns slightly more space (flex:1.2) like they have on desktop: {F30199839,width=100%} Comparison at different widths: |320|{F30199841,width=100%}|{F30199839,width=100%} |360|{F30199835,width=100%}|{F30199837,width=100%} (n.b. 320 is the smallest device we support but is far less common than 360 and above)

At some point a few years WMUI added vertical borders between toolbar buttons, which on desktop looks okay where the buttons are at least square or wider: {F30199815,width=500} With our new toolbar on mobile we are squeezing in more tools, making them narrow on some devices: {F30199841,width=100%} It may look less cramped if we just remove the borders: {F30199843,width=100%} Doing this highlights the uneven spacing between the icons due to the dropdown icons, although this can be tweaked by giving the dropdowns slightly more space (flex:1.2) like they have on desktop: {F30199839,width=100%} Comparison at different widths: |320|{F30199841,width=100%}|{F30199839,width=100%} |360|{F30199835,width=100%}|{F30199837,width=100%} (n.b. 320 is the smallest device we support but is far less common than 360 and above)