fix(dashboards-ng): make toolbar buttons responsive - #1820
fix(dashboards-ng): make toolbar buttons responsive#1820chintankavathia wants to merge 1 commit into
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a responsive toolbar feature for the dashboard by integrating the SiAutoCollapsableListDirective and adding an overflow menu for actions that do not fit in the available space. I have identified a high-severity issue where an incorrect method name is used for checking visibility, and a medium-severity issue regarding the hardcoded aria-label which should be internationalized. Additionally, please ensure the component adopts the ChangeDetectionStrategy.OnPush strategy as required by the project style guide.
currently when screen width is less toolbar action buttons and cancel/save buttons wraps and stack on each other without any spacing.
efb3e68 to
aef9dcd
Compare
|
@panch1739 please have a look here. I am not sure if this is the ideal responsive behavior |
panch1739
left a comment
panch1739
left a comment
There was a problem hiding this comment.
@spike-rabbit @chintankavathia i think is a bit strange that only one action gets inside the menu. Could it be possible to collapse all actions in the menu, and only leave save/cancel visible?
@panch1739 It is dynamic in nature so if the view shrinks more then other action will also move into the menu. 
|
@chintankavathia ahhh ok, thanks for clarifying! Mmm i'm wondering if we should collapse all actions in the menu, even if there is space...just leaving save/cancel outside. @spike-rabbit WDYT? |
|
@panch1739 I think that would make sense. Then it is also aligend with the cab |
spike-rabbit
left a comment
spike-rabbit
left a comment
There was a problem hiding this comment.
@chintankavathia please try to build the suggestion by @panch1739
3 participants
currently when screen width is less toolbar action buttons and cancel/save buttons wraps and stack on each other without any spacing.
BEFORE:
AFTER:
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: