Calcite Block header menu actions causes overflow in Panel/Flow Item
I'd like to report a visual bug when using Calcite Block with header menu actions. I believe this is an issue with Calcite Action Menu in general.
The Calcite Action Menu (which is used by Calcite block) is designed such that the popover is always present in the DOM, just hidden, and becomes visible when the trigger action is clicked.
However, before becoming active, the popover has a default position to the right of the trigger action. It is only repositioned when the action menu becomes active.
If the Calcite block is placed within a calcite panel or calcite flow item (which uses a panel internally), the content-wrapper div in calcite panel has overflow: auto, thus resulting in this horizontal scrollbar, which disappears once you click on the action menu (since the popover repositions and there is no more overflow).
This bug is visible even on the Calcite Block documentation page: Block | Calcite Design System | ArcGIS Developers as seen below. The horizontal scrollbar disappears once you click on the action menu.
Would appreciate if this could be fixed ASAP! The content-wrapper class which has overflow:auto set is within the shadow DOM and thus is quite difficult to customize ourselves.
Probably having a similar issue, where I placed a search widget into a calcite-panel via a div element with an id to be referenced on the search widgets container property.
<calcite-panel heading="Search Widget" id="search-panel" closable[closed]="isCollapsed()" (calcitePanelClose)="isCollapsed.set(true)"><div #searchDiv></div></calcite-panel>
@ViewChild('searchDiv') elementRefSearch?: ElementRef;
const searchWidget = new Search({view: view,...container: this.elementRefSearch!.nativeElement});
The content-wrapper div is having overflow: auto which causes the suggestion list of the search to be hidden with a vertical scroll bar instead of the panel to grow in height.
I worked around that by calculating the height of the suggestion list and setting a min-height on the search-widgets container div.
