Enhance Command Bar with Overflow Option for Smaller Widths

[PowerThomas]

Overview

I would like to request an enhancement to the command bar of the PCF control to improve its usability when the control is placed in a narrower space, such as a two-column tab. The enhancement involves implementing an overflow menu similar to the model-driven apps command bar, ensuring all commands remain accessible even in constrained layouts.

Details

• Current Issue: When the control is placed in a smaller width (e.g., a two-column tab), some commands are not visible, which hinders functionality and user experience.
• Proposed Enhancement: Introduce an overflow option with three vertical dots ("...") that appear when commands exceed the available space. Clicking the three dots will display a submenu containing the hidden commands, ensuring all functionalities are accessible regardless of the control's width.

Benefits

• Improved Usability: Ensures all commands are accessible, regardless of the control's width, enhancing the user experience.
• Consistent UI: Aligns the control's behavior with the familiar model-driven apps command bar, providing a consistent user interface.
• Flexibility: Allows the control to be effectively used in various layouts and screen sizes without losing command functionality.

Implementation Suggestions

1. Detect when the command bar's width exceeds the available space.
2. Implement a three vertical dots overflow menu that appears when necessary.
3. Move any overflowing commands into the submenu accessible via the overflow menu.

[PowerThomas]

[GorgonUK]

Thank you for highlighting the above. I will make sure to resolve this by next release.